收藏
批改状态：未批改
老师批语：
一、选择器优先级：
style > id 选择器> 类选择器> 标签选择器
id 选择器 以#开头
class 选择器 以 . 开头
二、盒模型基础知识点：
1. 盒子模型可以设置5个样式：宽高背景内外边框与边框
（1）width:宽度（水平方向的）
（2）heght:高度（垂直方向）
（3）background-color:背景（默认透明）
（4）padding:内边距，内容与边框之间的填充区域
（5）margin:外边框，决定当前盒子与其它盒子之间的位置和关系
（6）border:边框，位于内外边距之间，是可见元素，允许设置宽度，样式和颜色
2. 根据可见性可以分位两类：
（1） 可见的：width height border
（2） 透明的：background padding margin
注：padding margin 只允许设置宽度，不允许设置样式和颜色
相关代码示列：demo5.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style2.css"> <title>一切皆盒子</title> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
相关CSS样式代码：static/css/style2.css :
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/*padding-top:20px;*/
/*padding-right: 30px;*/
/*padding-bottom: 40px;*/
/*padding-left: 50px;*/
/*左右相同，上下不同，如左右30px , 上面20px,下面40px*/
/*padding:20px 30px 40px ;*/
/*左右相同，上下也相同，如左右30px , 上面20px*/
/* padding:20px 30px ;*/
/*上下左右都为50px*/
padding :50px;
/*border-top-width: 10px;*/
/*border-top-style: solid;*/
/*border-top-color: red;*/
/*border-right-width: 10px;*/
/*border-right-style: solid;*/
/*border-right-color: green;*/
/*border-bottom-width: 10px;*/
/*border-bottom-style: dotted;*/
/*border-bottom-color: yellow;*/
/*border-left-width: 10px;*/
/*border-left-style: dashed;*/
/*border-left-color: blue;*/
border-top : 10px solid red;
}
/*padding 和 margin 不会被子元素默认继承；height 和 wight是继承的*/
.box2{
padding :20px;
border-top : 10px solid yellow;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
