购物网站开发技术,在建设局网站备案怎么弄,城乡住房建设网站,杭州网站排名服务目录 1. 结构伪类选择器1.1 :nth-child(公式) 2. 伪元素选择器3. 盒子模型3.1 盒子模型的重要组成部分3.2 盒子模型 - 边框线3.3 盒子模型 - 内边距3.4 盒子模型 - 尺寸计算3.5 盒子模型 - 外边距3.6 盒子模型 - 元素溢出3.7 外边距问题 - 合并现象3.8 外边距问题 - 塌陷问题3.… 目录 1. 结构伪类选择器1.1 :nth-child(公式) 2. 伪元素选择器3. 盒子模型3.1 盒子模型的重要组成部分3.2 盒子模型 - 边框线3.3 盒子模型 - 内边距3.4 盒子模型 - 尺寸计算3.5 盒子模型 - 外边距3.6 盒子模型 - 元素溢出3.7 外边距问题 - 合并现象3.8 外边距问题 - 塌陷问题3.9 行内元素 - 内外边距问题3.10 盒子模型 - 圆角3.11 盒子模型 - 阴影 4. 清除默认样式 正文开始。
1. 结构伪类选择器 作用根据元素的结构关系查找元素。 选择器说明E:first-child查找第一个 E 元素E:last-child查找最后一个 E 元素E:nth-child(N)查找第 N 个 E 元素第一个元素 N 值为1
例如
1.1 :nth-child(公式)
作用根据元素的结构关系查找多个元素
功能公式偶数标签2n奇数标签2n12n-1找到5的倍数的标签5n找到第5个以后的标签包括第五个n5找到第5个以前的标签包括第五个-n5
例如
2. 伪元素选择器
作用创建虚拟元素伪元素用来摆放装饰性的内容。
选择器说明E::before在 E 元素里面最前面添加一个伪元素E::after在 E 元素里面最后面添加一个伪元素
注意
必须设置content:””属性用来设置伪元素的内容如果没有内容则引号留白即可。伪元素默认是行内显示显示模式权重和标签选择器相同
例如
3. 盒子模型 作用布局网页摆放盒子和内容 3.1 盒子模型的重要组成部分
内容区域width height内边距padding出现在内容与盒子边缘之间边框线border外边距margin出现在盒子外面
例如
stylediv {/* 内容区域 */width: 200px;height: 200px;bacdground-color: red;/* 内边距 */padding: 20px;/* 边框线 */border: 1px solid black;/* 外边距 */margin: 30px;}
/style3.2 盒子模型 - 边框线
属性名border 属性值边框线粗细 线条样式 颜色不区分顺序
属性值线条样式solid实线dashed虚线dotted点线
stylediv {width: 200px;height: 200px;bacdground-color: red;/* 粗细为2像素的红色虚线边框 */border: 2px dashed red;/* 粗细为2像素的红色实线边框 *//* border: 2px solid red; *//* 粗细为2像素的红色点线边框 *//* border: 2px dotted red; */}
/styleCSS 中允许单独对某一方向的边框线进行设置
属性名border-方位名词属性值边框线粗细 线条样式 颜色
方位名词说明top顶部right右侧left左侧bottom底部
例如
stylediv {width: 200px;height: 200px;background-color: red;border-top: 1px solid black;border-right: 2px dashed red;border-left: 3px dotted green;border-bottom: 2px dashed pink;}
/style3.3 盒子模型 - 内边距
作用设置内容与盒子边缘之间的距离 属性名padding / padding-方位名词
例如
stylediv {width: 200px;height: 200px;background-color: red;/* 所有方向一起设置 *//*padding: 20px;*/padding-top: 10px;padding-right: 20px;padding-left: 5px;padding-bottom: 30px;}
/style盒子模型内边距的多值写法
取值个数示例含义一个值padding: 10px;四个方向内边距均为10px两个值padding:10px 40px;上下10px左右40px三个值padding: 10px 40px 20px;上10px左右40px下20px四个值padding: 10px 40px 20px 30px;上10px右40px下20px左30px
3.4 盒子模型 - 尺寸计算
默认情况下盒子尺寸 内容尺寸 border 尺寸 内边距尺寸所以给盒子设置border / padding属性会撑大盒子我们可以通过以下两种方法来避免
手动减掉border / padding的尺寸内减模式box-sizing:border-box使 border / padding 不对盒子大小产生影响。
3.5 盒子模型 - 外边距
作用拉开两个盒子之间的距离 属性名margin 属性值与 padding 写法、含义相同
stylediv {width: 200px;height: 200px;background-color: red;/* 外边距为20像素 *//* margin: 20px; *//* 垂直方向外边距为零水平方向使盒子在浏览器中居中 *//* 版心居中的前提是盒子有宽度 */margin: 0 auto;}
/style外边距的多值写法与 padding 多值写法相同。
3.6 盒子模型 - 元素溢出
作用控制溢元素的内容的显示方式 属性名overflow
属性值效果hidden溢出隐藏scroll溢出滚动无论是否溢出都显示滚动条位置auto溢出滚动溢出才显示滚动条位置
例如
3.7 外边距问题 - 合并现象
场景垂直排列的兄弟元素上下 margin 会合并 现象取两个 margin 中较大值生效
3.8 外边距问题 - 塌陷问题
场景父子级的标签子集的添加上外边距会产生塌陷问题。 现象导致父级一起向下运动。
解决方法
取消子集 margin父级设置 padding推荐父级设置 overflow:hidden父级设置 border-top
3.9 行内元素 - 内外边距问题
场景行内元素添加margin / padding时无法改变元素垂直位置 解决方法给行内元素添加line-height可以改变垂直位置
3.10 盒子模型 - 圆角
作用设置元素的外边框为圆角。 属性名border-radius 属性值数字px / 百分比圆角半径 多值写法从左上角顺时针赋值没有赋值的角与对角取值相同
常见应用:
正圆形状给正方形盒子设置圆角属性值为宽高的一半或50%。胶囊形状给长方形盒子设置圆角属性值为盒子高度的一半。
3.11 盒子模型 - 阴影
作用给元素设置阴影效果 属性名box-shadow 属性值X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意
X轴偏移量和Y轴偏移量必须书写默认是外阴影内阴影需要添加inset
例如
box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.5);4. 清除默认样式
作用清除默认的样式。
例如
style/* 清除内外间距 */* {margin: 0;padding: 0;}/* 清除列表的项目符号 */li {list-style: none;}
/style
