菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王文博-20221014-CSS样式03 [打印本页]

作者: 博5237 时间: 2022-10-14 23:39
标题: 王文博-20221014-CSS样式03
一、今日学习内容
1、CSS盒子模型
1.1、概念：css盒子模型，本质就是一个盒子封装周围html元素，盒子模型包括：边框、外边距、内边距和盒内的实际内容
一个标签就是一个盒子，不仅仅是div标签，所有的标签都是盒子
1.2、边框（border）：可以设置盒子的边框
边框宽度（border-width）：像素
边框样式（border-style）：solid（实线边框）：常用、dashed（虚线边框）、dotted（点线边框）、none（取消边框）
边框颜色（border-color）：
设置不同位置的边框：上边路框：border-top、左边框：border-left、下边框
表格的细线边框：设置表格的细线边框（border-collapse）：
属性为：collapse
代表合并塌陷的意思，目的是将相邻边框合并到一起，边框重叠
边框会影响盒子的大小：
解决方法：1、测量的盒子的时候不量边框
2、测量的时候包括了边框，那么设置盒子宽高时，应该减去边框的宽度*2（边框有上下左右四个部分）
1.3、内边距（padding）：
属性和属性值
属性说明
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
内边距简写（常用）
值的个数说明
padding：10px; 上下左右内边距都是10px
padding：10px 50px; 上下内边距为10px，左右内边距为50px
padding：20px 40px 60px; 上内边距为20px，左内边距40px，下内边距60px
padding：20px 40px 60px 80px; 上内边距20px，右内边距40px，下内边距60px，左内边距80px（顺时针方向）
特性：1、没有宽度的盒子的左右内边距无法撑开盒子
2、内边距会撑大盒子，如果添加了内边距之后不想撑大盒子，那么就用盒子本身的大小减去内边距即可
1.4、外边距（margin）：
属性和属性值
属性说明
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
外边距简写（常用）
值的个数说明
margin：10px; 上下左右外边距都是10px
margin：10px 50px; 上下外边距为10px，左右外边距为50px
margin：20px 40px 60px; 上外边距为20px，左外边距40px，下外边距60px
margin：20px 40px 60px 80px; 上外边距20px，右外边距40px，下外边距60px，左外边距80px（顺时针方向）
特性：1、设置左外边距，需要行内元素来进行，或块级元素转行内元素
2、设置下外边距，需要设置块级元素
外边距典型应用：
1、可以让块级壳子水平居中，需要满足以下条件
1、盒子指定宽度
2、盒子左右外边距设置auto即可
2、如果行内元素或者块级元素设置水平居中，使用text-align：center；来实现（给父级添加该属性）
外边距合并的问题：相邻块元素垂直外边距合并问题
当上下相邻的两个块级元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，他们之间垂直间距不会相加，而是会采用较大的值
嵌套块元素的垂直外边距塌陷：
如果父元素盒子元素同时都有上外边距，此时父元素就会塌陷比较大的外边距值
解决塌陷问题
1、给父元素添加上边框
2、给父元素添加上内边距
3、给父元素添加overflow：hidden；属性来解决
清除内外边距：
网页中各个元素基本都带有自己所带的内外边距，使用通配符，进行清除，方便后期样式调整
2、CSS的圆角边框：
语法：border-radius：length（像素值）
属性值可以为具体的数值或者百分比，border-radius指的是圆的半径
想要画正圆的话，先画一个正方形，然后将border-radius的值设为50%即可
分别设置四个角圆弧的语法：
border-left-top-radius: 左上
border-top-right-radius: 右上
border-left-bottom-radius: 左下
border-right-bottom-radius: 右下
3、CSS的盒子阴影：
属性名：box-shadow：
值说明
h-shadow 必须值，水平阴影的位置，允许负值
v-shadow 必须值，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影尺寸
color 可选，阴影颜色
inset 可选，将外部阴影改为内部阴影
注意：阴影默认外阴影（outset），但是这个属性不能写在box-shadow属性里面，否则阴影无效
盒子阴影不会占用空间，也就是不影响合资的排列

二、今日问题

三、解决方案

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)