目标:能认识不同选择器的优先级公式,能够进行CSS权重叠加计算,分析并解决CSS 冲突问题
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级的公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <
!important
注意点:
场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生
效
比较规则:
注意点:!important如果不是继承,则权重最高,天下第一!
目标:能够使用 PxCook 工具测量设计图的尺寸和颜色,能够从psd文件中直接获取数据
目标:能够认识盒子模型的组成,能够掌握盒子模型边框、内边距、外边距的设置方法
边框(border)- 单个属性
边框(border)- 连写形式
边框(border)- 单方向设置
盒子实际大小初级计算公式
边框的应用
<div class="line">div>
<style>
.line {
width: 500px;
border-top: 1px solid blue;
}
style>
<div class="arrow">div>
<style>
.arrow {
/* 内容宽高为0,只显示边框 */
width: 0px;
height: 0px;
box-sizing: content-box;
border: 15px solid;
/* 只有上边框显示颜色,其他三个方向透明,形成向下的箭头 */
border-color: black transparent transparent transparent;
}
style>
外边距(margin)- 取值
外边距(margin)- 单方向设置
清除默认内外边距
/* 淘宝代码 */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3,
h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul
{
margin: 0;
padding: 0;
}
/* 京东代码 */
* {
margin: 0;
padding: 0;
}
box-sizing属性决定了盒子的计算方式,取值如下:
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>Documenttitle>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a {
display: inline-block;
/* width: 80px; */
height: 40px;
/* 通过内边距设置边框与内容的间距 */
padding: 0 20px;
color: #4c4c4c;
text-decoration: none;
text-align: center;
line-height: 40px;
font-size: 12px;
}
.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>
html>
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>Documenttitle>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
body {
/* 去除行高带来的默认间隙,完成精准布局 */
line-height: 1;
}
.box {
width: 500px;
height: 400px;
/* background-color: pink; */
border: 1px solid #ccc;
padding: 41px 30px 0;
/* 自动内减 */
box-sizing: border-box;
}
.box h2 {
height: 41px;
/* background-color: pink; */
border-bottom: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
font-size: 30px;
}
.box ul {
list-style: none;
}
.box ul li {
height: 50px;
padding-left: 30px;
border-bottom: 1px dashed #ccc;
line-height: 50px;
}
.box li a {
text-decoration: none;
font-size: 18px;
color: #666;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,phpa>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>
html>