这是我参与8月更文挑战的第4天,活动详情查看: 8月更文挑战
三、尺寸和边框
1.尺寸属性
width: 宽
height: 高
取值,px为单位的数字
%
max-width 最大宽
min-width 最小宽
max-height 最大高
min-height 最小高
注意:max-width:100%;定义在图片上
图片可以缩放,但是最大不能超过本身原始宽度
尺寸单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值 1pt=1/72in 设置字号大小
4.cm
5.mm
6.em 以父元素设置的数值为基本数值(1倍)
7.rem 以html设置的数值为基本数值(1倍)
面试题em和rem 的区别,html如果没有自主的定义尺寸,那么1rem=16px
8.% 以父元素的尺寸为百分比
2.页面中允许设置尺寸的元素
如果元素自带宽高属性,就可以设置css尺寸(img table)
块级元素 | 行内元素 | 行内块(input) |
---|---|---|
可以设置尺寸 | 设置尺寸无效 | 可以设置尺寸 |
不设置宽度,宽度为父元素100% | 尺寸靠内容撑开 | 不设置宽高,浏览器自动给尺寸 |
不设置高,高度由内容撑开 | 不同浏览器下默认尺寸不同 |
3.溢出
内容比较多,容器尺寸较小,会发生溢出
默认情况,都是纵向溢出
overflow:visible; 默认值,溢出部分可见
hidden; 溢出隐藏
scroll; 添加滚动条,就算不溢出,也会滚动条的槽
auto; 如果不溢出,没有滚动条
overflow-x
overflow-y 单独设置x或y轴的滚动条
溢出的底层特别复杂,特殊的底层效果导致可以解决css中一些特殊情况
但是这些特殊情况,都明确表明不要用溢出解决
如何设置横向溢出
父元素设置小宽度,子元素设置大宽度
给父元素设置overflow
4.边框
1)边框的简写形式
border:width style color;
width 边框的宽度
style 边框的样式
solid 实线
dashed 短线虚线
dotted 点点虚线
double 双实线
color 边框的颜色
border:none/0 清除边框 建议使用0
最简方式 border:style;
2)单边设置
border-方向:width style color;
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
3)单属性
同时设置四个方向某一属性
border-style 设置同样样式
border-color 设置同样颜色
border-width 设置同样宽度
4)单边单属性设置
border-方向-属性;
border-right-color
border-left-style
5.边框的倒角(圆角)
border-radius:圆的半径;
px/% 50%就是圆
单脚的定义
border-上下-左右-radius:圆的半径;
border-top-left-radius:20px;左上角
6.边框的阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow 阴影水平偏移距离
v-shadow 阴影垂直偏移距离
blur 阴影模糊程度
spread 阴影大小
color 阴影颜色
inset 加上inset,内部阴影
不加外部阴影
7.轮廓
轮廓不占页面空间
绘制在元素边框以外的一圈线条
outline:width style color;
outline:0;
四、盒子模型
1.框模型
所有元素皆为框
所有元素在页面上都占据空间,默认情况元素本身的空间,不能被其他元素占据
盒子模型:元素在页面上占据空间的计算方式
元素实际占地宽度:左外边距+左边距+内容区域宽度+右内边距+右边距+右外边距
元素实际占地高度:上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距
外边距margin:边框以外的区域
内边距padding:边框到内容区域之间的距离
2.margin
外边距在也页面中,F12选中时为橘黄色
外边距是透明的没有颜色
语法
margin:v1 同时设置四个方向的外边距
margin-top
margin-right
margin-left
margin-bottom
注意
1.取值:px 为单位数字
% 是父元素宽度的百分比
auto 上下外边距可以设置auto,但是无效
自动计算左右外边距(元素必须定义了宽度)
让块级元素在父元素内部水平居中
2.当外边距发生冲突时
左右冲突,以左为准
3.设置元素的外边距,元素会在页面中发生位移效果
4.外边距的颜色是透明的
简写方式:
margin:v1; 同时设置四个方向的外边距 margin:auto
margin:v1 v2; 上下 左右 margin:0 auto margin:20px auto
margin:v1 v2 v3; 上 左右 下 margin:0px auto 10px;
margin:v1 v2 v3 v4; 上右下左
3.外边距引发的特殊情况
外边距的合并
当两个垂直外边距相遇时,会合并成一个
最终以大为准
解决方案:在一个div中直接把垂直外边距写满
在设置的时候规避外边距合并
1)块级元素,行内元素,行内块的区别
块级元素
独占一行
设置宽高有效
不设置宽高,宽默认为父元素宽度100%,不设置高,高度默认为内容撑开
4个方向外边距有效
行内元素
与其他行内和行内块公用一行,一行放不下自动换行
设置宽高无效
宽高都靠内容撑开
左右外边距有效
上下外边距无效
行内块
与其他行内和行内块共用一行,一行放不下自动换行
设置宽高有效
不设置宽高,浏览器会给你一个默认的宽高
不同浏览器给的默认宽高不同
四个方向外边距有效
当一个行内块通过外边距改变垂直的位置时,会带着同一行其他行内块和行内元素一起移动
2)自带外边距的元素
body 自带8px,4个方向
ul 上下16px外边距,左内边距40px
h1-h6 p hr dl dd dt fireldset form legned
3)外边距的溢出
在特殊情况下,给子元素添加上外边距,会作用到父元素上
特殊情况:1.父元素没有上外边距
2.子元素内容区域的上沿和父元素内容区域的上沿重合
解决方案:1.父元素添加上边框,但增加了父元素的实际占地高度
2.给父元素添加上内边距,但增加了父元素的实际占地高度
3.给父元素添加overflo:hidden/auto,但是父元素想要溢出就不行了
4.给父元素添加一个大儿子,空<table></table>
4.内边距padding
内边距时边框到内容之间的距离
内边距有颜色,就是当前元素的背景颜色
改变内边距,感觉上时元素变大了,实际时元素占地面积变大,内容区域没有改变
padding:v1; 设置4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
取值 px
% 父元素宽度的百分比
没有auto值
padding:v1;
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上右下左
5.margin和padding的使用场合
margin 一般用于元素位置的微调
设置元素和元素之间的距离
padding 用于把元素撑开
有些需求下,内边距可以做元素位移效果(不是让元素移动,是让区域内容移动)
有些需求下,内边距用来设置元素之间的距离
6.改变盒子模型计算方式
box-sizing: content-box 默认值,content--->内容区域
设置的width时内容区域的宽度
height时内容区域的宽度
盒子模型计算这个元素实际占地宽度的公式
左右外边距+左右边框+左右内边距+width
border-box 设置的width时border以内的部分
(border+padding+内容区域宽度)
盒子模型计算这个元素实际占地宽度的公式
左右外边距+width
当元素的width设置为百分比的时候,一般都会使用border-box
这样的话,就能够通过随着边框和内边框来控制元素之间的距离
并且在不用计算的情况下,可以让元素不被挤下去