CSS03-盒子模型
CSS 三大特性
1. 继承性
2. 层叠性
3. 优先级
➢ 优先级公式：（范围越广的选择器，优先级越低）
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式（style="color: pink ）< !important
<style>
/* id选择器 */
#box {
color: orange;
}
/* 类选择器 */
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
</style>
</head>
<body>
<!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
复合选择器权重叠加计算的公式
PxCook的基本使用
.png 用设计模式 放大量更准确
.psd用开发模式 切换到开发界面，直接点击获取数据
不要的点箭头选中 delete删除
盒子模型
利用 width 和 height 属性默认设置是盒子 内容区域 的大小
边框（border）- 连写形式 border : 10px solid red ➢ 快捷键：bd + tab
➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？ • border：20px solid blue；
➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？ • border-top：10px dashed yellow；
颜色#0000ff 可写成#00f 两两一组
检查 computed看盒子大小
➢ 布局顺序： 1. 从外往内，从上往下
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
内边距（padding）
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
/* padding: 50px; */
/* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四值: 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值 : 上 左右 下*/
/* padding: 10px 40px 80px; */
/* 两值 : 上下 左右*/
/* padding: 10px 80px; */
padding-left: 10px;
padding-bottom: 50px;
}
/* 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */
</style>
自动内减
给盒子设置属性 box-sizing : border-box
外边距（margin）
清除默认内外边距
<style>
* {
margin: 0;
padding: 0;
}
</style>
版心居中
<style>
div {
margin: 0 auto;
}
</style>
<body>
<!-- 版心: 网页的有效内容 -->
<!-- 版心居中 -->
<div>版心</div>
</body>
外边距折叠现象
1、合并现象
垂直布局 的 块级元素，上下的margin会合并 最终两者距离为margin的最大值
只给其中一个盒子设置margin即可
2、塌陷现象
互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上 导致父元素一起往下移动
给父元素设置overflow：hidden
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
行内元素的margin和padding无效情况
![]()
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或botttom 不生效 用line-height: 100px 行高解决 -->
<span>span</span>
<span>span</span>
</body>
网页新闻案例效果图
<title>网页新闻列表</title>
<style>
* {
margin: 0;
padding: 0;
/* 所有标签自动内减 */
box-sizing: border-box;
}
.news {
height: 400px;
width: 500px;
border: 1px solid #ccc;
/* 与页面上边距50px auto左右水平居中 */
margin: 50px auto;
/* 与上面间距42px 左右30px 下面不给写0 盒子总高是400px 有内容自动往下撑 */
padding: 42px 30px 0;
}
.news h2 {
/* bd+tab 再在border后面加bottom */
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是一倍，就是字号的大小 去除行高带来的默认间隙，完成精准布局 */
line-height: 1;
padding-bottom: 10px;
}
/* 去掉列表圆点 */
ul {
list-style: none;
}
.news li {
height: 50px;
/* dashed虚线 */
border-bottom: 1px dashed #ccc;
padding-left: 28px;
/* 文字居中 高是50px 行高50px就能居中 */
line-height: 50px;
}
.news a {
text-decoration: none;
font-size: 20px;
color: #666;
}
</style>
<!-- 从外到内:先宽高背景色,放内容，调节内容的位置;控制文字细节 -->
</head>
<body>
<div class="news">
<!-- 最重要的logo h1仅一个 -->
<h2>最新文章/New Articles</h2>
<!-- ul>li>a 回车 -->
<ul>
<!-- 快速复制多个alt+shift+向下箭头 -->
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中的链式编程是什么</a></li>
</ul>
</div>
</body>
浙公网安备 33010602011771号