目录
一、内联元素的盒子
行内元素的盒子模型
内容区 不能设置宽高,是被内容撑开
内边距 可以设置,但垂直方向不会改变页面的布局,也就是不会挤别人
边框 可以设置,但垂直方向不会改变页面的布局,不会挤别人
外边距 垂直方向不能设置外边距,水平方向可以设置,而且水平方向外边距不会重叠
1、display
用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素(即可以设置宽高,又不会独占一行)
table 将元素设置为一个表格
none 元素不在页面中显示(隐藏一个元素)
2、visibility
用来设置元素的显示状态
可选值:
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示(隐藏一个元素),位置依然保留
面试题:隐藏元素有几种方式,几者区别是什么
1.display:none; 删除了元素,元素位置不保留
2.visibility:hidden; 元素位置保留
3.将元素变为透明 元素位置保留
二、默认样式
方式1:默认样式:
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding等等
而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认样式都去除
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
方式2:重置样式表
专门用来对浏览器的样式进行重置
注意:
1、引入reset.css文件,前提是这个文件要有
2、引入reset.css文件一定是在你写的样式之前引入
<link rel="stylesheet" href="./reset.css" />
三、盒子的大小
box-sizing
用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值:
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,内容区
.box {
width: 100px;
height: 100px;
background-color: red;
box-sizing: border-box;
}
四、阴影和圆角
1、box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右 ,必选
第二个值:垂直偏移量 正->下 负->上 ,必选
第三个值:模糊半径 默认0px,可选
第四个值:颜色 默认是黑色,可选
.box1 {
width: 200px;
height: 200px;
background-color: #f60;
margin: 0 auto;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
2、border-radius
border-radius用来设置圆角 以10px为半径画圆
borde-top-right-radius:设置盒子右上方的圆角
border-top-left-radius:设置盒子左上方的圆角
border-bottom-left-radius:设置盒子左下方的圆角
border-bottom-right-radius:设置盒子右下方的圆角
补充:border-radius: 50%; 设置圆形
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}