1、盒子模型
(1)内边距padding(负值没有意义)
padding:10px 1个值,4个方向一样
padding:10px 20px 2个值,上下,左右
padding:10px 20px 30px 3个值,上 左右 下
padding:10px 20px 30px 40px 4个值,上 右 下 左
padding-top
padding-bottom
padding-left
padding-right
(2)边框border
border:10px solid red;
border-width
border-style
border-color
border-style样式:solid(实线),double(双线) dashed(虚线)dotted(点状线)
背景色也能蔓延到边框
border-top
border-bottom
border-right
border-left
(3)外边距margin(支持负值)
margin-top
margin-bottom
margin-right
margin-left
背景色没有蔓延
横向居中方案:margin:0 auto;
特性问题
1、兄弟关系,两个盒子垂直外边距与水平外边距问题
------垂直方向外边距取最大值
------水平方向外边距会进行合并处理,也就是距离相加
2、父子关系,给子加外边距,但是作用于父母身上了,怎么解决?
(1)给父盒子加内边距,子margin-top===>父的padding-top,注意高度计算
(2)给父盒子设置边框
(3)加浮动(子父其中一个都可以)
(4)overflow:hidden
2、溢出属性
<pre></pre>标签:预格式化文本-保留空间,tab,回车
pre-wrap:换行显示,显示空格、回车
pre-line:显示回车,不显示空格
nowrap:不换行
3、元素显示类型
块元素有这属性:display:block
display:list-item
p标签里边不要套用其他标签,不然p标签会被打断,p标签只能放文本,不能放块级元素
行内元素有这属性:display:inline
行内块元素有的属性:display:inline-block
span这种行内元素只能设置边距的左右,不能设置上下边距
在元素中加入相对于的块元素属性、行内元素属性、行内块元素属性,则该元素能转换成相对应的元素使用
属性display:none的使用
案例效果:
刚开始显示“小案例”三个字,当鼠标放上去,显示ul里面的内容“111”,“222”,“333”
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide{
display: none;
}
.box:hover ul{
display: block;
}
</style>
</head>
<body>
<div class="hide">111111111</div>
<div class="box">
小案例
<ul class="hide">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>