CSS高级操作-笔记
CSS高级操作
- 理解盒子模型及构成
- 会计算盒子模型的尺寸
- 会使用盒子模型的两种解析方式来布局网页
- 会使用圆角属性给网页元素添加圆角效果
- 会使用盒子阴影属性给网页元素添加阴影效果
- 会使用四种防止父级边框塌陷的清楚浮动的方法
理解盒子模型及构成
css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
会计算盒子模型的尺寸
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
边框(border)
border-color 属性的设置方法
border-top-color 设置上边框颜色
border-right-color 设置右边框颜色
border-bottom-color设置下边框颜色
border-left-color设置左边框颜色
border-color:(一个值)设置四个边框为同一个颜色
(两个值)上下边框颜色和左右边框颜色
border-width 设置边框粗细
border-top-width设置上边框粗细
border-right-width设置右边框粗细
border-bottom-width设置下边框粗细
border-left-width设置左边框粗细
border-width:(一个值)设置四个边框为相同粗细
(两个值)上下边框颜色和左右边框粗细
(四个值)设置上,右,下,左边框粗细
border-style设置边框样式
none表示无边框
dotted表示点线边框
dashed表示虚线边框
solid表示实线边框
border-top-style 设置上边框为实线
border-right-style 设置右边框实线
border-bottom-style 设置下边框实线
border-left-style 设置左边框实线
border-style: (一个值)设置四个边框为实线
(两个值)上下边框实线和左右边框实线
(四个值)设置上,右,下,左边框实线
外边距(margin)
margin-top 设置上外边距
margin-right 设置右外边距
margin-bottom 设置下外边距
margin-left 设置左外边距
margin: (一个值)设置四个边框外边距
(两个值)上下边框外边距和左右外边距
(四个值)设置上,右,下,左外边距
内边距(padding)
padding-top 设置上内边距
padding-right 设置右内边距
padding-bottom 设置下内边距
padding-left 设置左内边距
padding: (一个值)设置四个边框内边距
(两个值)上下边框外边距和左右内边距
(四个值)设置上,右,下,左内边距
会使用盒子模型的两种解析方式来布局网页
使用:宽度width和高度height增加盒子模型的总尺寸
使用:box-sizing
事先定义盒子模型的尺寸解析方式
使用方法:
box-sizing: content-box|border-box|inherit;
content-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容
框。在宽度和高度之外绘制元素的内边距和边框。
border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何
内边距和边框都将 在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减
去边框和内边距才能得到内容的宽度和高度。
inherit:规定应从父元素继承 box-sizing 属性的值。
会使用圆角属性给网页元素添加圆角效果
border-radius属性设置圆角效果
该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属
性的可能取值为：
none，默认值，表示元素没有圆角效果
length，由浮点数字和单位标识组成的长度值
%，由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同
组成。同时规定，该取值不得取负数。
例1：利用整数来实现圆角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角
效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边
框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均
为5px。
例2：查看下列CSS代码。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提 供了
小于四个的数据。这种情况下，数据依然按照“左上角 右上角 右下角 左下角”的顺序进行
排列，没有涉及到的角方向按照其对角的圆角数据进行设置。
因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为
右上角 的像素设置，即5px。
请同学们根据这样的方法，理解一下组（3）的圆角含义。
组（4）就设置了一个数据，这表示四个方向的角半径均为10px。
二、独立设置元素的四个圆角效果：
若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属
性派 生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均
为25px。
方法1：利用border-radius属性统一设置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius属性的派生子属性设置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属
性的派生子属性设置左下角没有圆角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
三、设置水平角半径和垂直角半径不同的圆角效果
W3C也提供了两个角半径不相同的圆角效果设置方式，这里依然以左上角为例，
来展示两个角半径不同的设置方式。
格式：border-top-left-radius:水平角半径/垂直角半径;
上述格式中，两个方向的角半径之间利用斜杠（/）间隔。
例4：设置div块级元素的左上角圆角效果为：水平角半径50px，垂直角半径25px。
div{border-top-left-radius: 50px/25px;}
会使用盒子阴影属性给网页元素添加阴影效果
box-shadow的语法
语法: box-shadow:inset x-offset y-offset blur-radius color;
box-shadow 属性有五个参数,每个参数都有自己的作用
inset :阴影类型 可选值,如果不设置,默认的投影方式是外阴影;如果设置了inset,
表示是内阴影
x-offset :x轴位移
y-offset :y轴位移
blur-radius :阴影模糊半径
color:阴影颜色
会使用四种防止父级边框塌陷的清楚浮动的方法
网页布局
标准文档流:是指元素根据块元素或者行内元素的特性安从上到下,从左到右
的方式自然排列
display属性
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
浮动
float 属性值
left元素向左浮动
right 元素向右浮动
none 默认不浮动
清除浮动
clear属性
left 在左侧不允许出现浮动元素
right 在右侧不允许出现浮动元素
both 在左,右两侧不允许出现浮动元素
none 默认值,允许浮动出现在两侧
解决父级边框塌陷的方法
1.添加空标签
< div style="clear:both;margin:0;padding:0">inline-block 和浮动的区别
共性：
① inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素
的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素
设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元
素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设
置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，
内容为inline。
② float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身
大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素
就脱离了文档流，相邻元素会呈环绕装排列。
两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。
区别：
① inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为
行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的
垂直对齐基线。
② float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大
小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。
position 定位属性
position: static（默认值）
（1）static 是默认值。表示没有定位，或者说不算具有定位属性。
（2）如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在
正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
position: relative（相对定位）
（1）relative 生成相对定位的元素，相对于其正常位置进行定位。
（2）相对定位完成的过程如下：
首先按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。
然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性
确定，偏移前的位置保留不动。
position: absolute（绝对定位）
（1）absolute 生成绝对定位的元素。
（2）绝对定位的元素使用 left、right、top、bottom 属性相对于其最接近的一个具有
定位属性的父元素进行绝对定位。
（3）如果不存在这样的父元素，则相对于 body 元素，即相对于浏览器窗口。
position: fixed（固定定位）
（1）fixed 生成绝对定位的元素，该元素相对于浏览器窗口进行定位。
（2）固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影
响，而是始终位于浏览器窗口内视图的某个位置。