CSS【二】与盒子模型
CSS权重二个选择器 同一个样式出现二次CSS 选择符1 id 100002 class 10003 标签 1004 行内样式 100000
盒模型元素【标签】是一个盒子【现实】组成1 内容]【双标签：标签体可以撑起元素的高度或宽度】2 内边框【padding】padding-top:上padding-right右padding-bottom下padding-left左内容到边框的距离3 边框【border】三要素：1 厚度[width]2 颜色[color]3 效果[style]border:10px solid[线形] 颜色默认情况下与字体颜色保持一致4 外边框【margin】:看不见摸不着的空气墙[元素与元素之间的距离]
CSS元素类型基本元素类型1 块2 行3 行内块
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>第五节课</title>
<!-- 内部样式--><style>.div文件01{/*宽度*/width: 200px;/*高度*/height: 200px;/*背景颜色 */background-color: red;}#div文件01{/*背景颜色 */background-color: black;}div{background-color: pink;}/*后代选择器 复杂选择器: 缩小范围是由二个或二个以上的选择符生成选择符1 + 空格 + 选择符2[包含关系]{
}*/ul div{/*宽度*/width: 200px;/*高度*/height: 200px;/*背景颜色 */background-color: black;/*字体颜色*/color: pink;}#a1{/*字体颜色*/color: green;}</style>
</head>
<!--在浏览器显示 -->
<body>
<!-- 容器--><div id="div文件01" class="div文件01" style="background-color: darkblue;
width: 400px">
</div>
<!-- 无序列表--><ul><div><p>sdjflksjd</p><a href="#" id="a1">012345678910</a></div></ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>Title</title>
<!-- 行内样式--><style>#文件1{/*宽度 */width: 200px;/*高度*/height: 200px;/*背景颜色*/background-color: red;/*字体颜色*/color:pink;border: 10px solid;}#文件2{/*背景颜色*/background-color: green;/*宽度*/width: 500px;/*高度*/height: 500px;/*内边框*/padding: 20px;}#文件3{/*宽度*/width: 200px;/*高度*/height: 200px;/*颜色背景*/background-color: red;color: pink;/*内边框 上*/border-top:20px solid blue;border-right:20px solid black;border-bottom:20px solid darkorange;border-left:20px solid darkgreen;}#文件4{/*宽度*/width: 200px;/*高度*/height: 200px;/*背景颜色*/background-color: blue;margin: 20px ;/*圆角幅度*/border-radius:50% ;}</style>
</head>
<!--在浏览器显示-->
<body><div id="文件1"><div></div></div><div id="文件2">
</div>
<div id="文件3"><p id="文本01">盒子模型</p></div><div id="文件4">外距离</div>
</body>
</html>
