盒模型
padding属性 设置元素内边距
上内边距 右内边距 下内边距 左内边距
padding-top padding-right padding-bottom padding-left
margin属性跟 padding 同理
border属性
border-width 宽 border-solid 实线 dotted 点状边框 double 双线
box-sizing :content-box 默认盒模型
opaciy:属性值0~1 透明度
overflow:scroll 内容溢出增加滚动条
dispiay:none 隐藏 display:block 显示
鼠标样式
hand pointer 手型样式 nw-resize 想左上的键头 e-resize 向右的箭头
crosshair 十字型样式 ne-resize 向右上的箭头 n-resize 向上的箭头
text 移动到文本上的效果 w-resize 向左的箭头 sw-resize 向左下的箭头
wait 等待的效果 s-resize 向下的箭头 se-resize 向右下的箭头
default 默认效果 auto 系统自给的效果
溢出的处理
overflow 如果内容溢出了元素内容区域,是否对内容的边缘进行裁剪。
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。
visible 不裁剪内容,可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框,则应该提供滚动机制。
4.rem根元素字体大小
浏览器默认字体大小为16px
em是以父元素字体为基准的
rem是以根元素字体大小为基准的
轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
display属性
none 此元素不会被显示。
block 此元素将显示为块级元素。特征:换行,可设置宽高尺寸。
inline 行内元素,默认。特征:大小自适应;不换行。
inline-block 行内块元素。特征:可以设置大小,但是不可以换行。
其他:list-item/table/inline-table/table-cell/table-caption......
浮动
Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列
左浮动:不脱离文本流 脱离文档流
有浮动:文本流文档流都脱离
使用浮动元素会变为行内快元素
使用浮动对兄弟元素造成影响,对付容器也造成影响,如果子元素全部浮动父元素坍塌
(清除浮动)解决浮动带来的影响
1.给父容器添加高度
2.给使用浮动的元素后面添加clear:both;
3.after伪类(元素:after{content:"";display:block;clear:both})
4.overflow:hidden;
下面是一个导航栏实例
<!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>导航栏</title>
<link rel="stylesheet" href="./7.css">
<!-- 外部样式 link引入 -->
</head>
<body>
<div id="ace">
<ul>
<li><a href="">中国</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul>
</li>
<li><a href="">日本</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul></li>
<li><a href="">美国</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul></li>
<li><a href="">德国</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul></li></li>
<li><a href="">俄罗斯</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul></li></li>
<li><a href="">英国</a>
<ul class="ddd">
<li><a href="">版图</a></li>
<li><a href="">民族</a></li>
<li><a href="">地区</a></li>
</ul></li></li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
/* 重置默认 */
}
ul li{list-style: none;}
/* 去掉无序列表前的点 */
#ace{
width: auto;
height: 60px;
background-color: floralwhite;
/* 为div盒子设置宽高以及背景颜色 */
}
#ace>ul>li{
float: left;
width: 270px ;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 20px;
/* 为li标签设置左浮,宽,高,文本水平居中,文本垂直居中,文本字体大小 */
}
a{
text-decoration: none;
/* 给链接标签a去掉下划线 */
color: black;
/* 字体颜色 */
}
li:hover{background: aqua;
/* 设置鼠标在li标签位置悬浮时的颜色 */
}
a:hover{
color: coral;
font-size: 30px;
/* 设置鼠标在a标签位置悬浮时的颜色以及字体大小 */
}
.ddd{
display: none;
/* 隐藏该标签 */
}
#ace>ul>li:hover .ddd{
display: block;
/* 鼠标在此标签位置悬浮时显示该标签 */
}
li{
border-radius:15px;
/* 设置圆角 */
}
结果