day03
2018-07-11 本文已影响0人
叶子巨蟹
今天学到了什么
1.盒子模型的传参
<style>
/*
margin:100px 四个方向全部改变
margin:100px 200px; top,bottom-- 100px left,right -- 200px
//传三个参数 top--100 left,right -- 200 bottom --300
margin:100px 200px 300px;
//传四个参数
margin:100px 200px 300px 400px
top right bottom left
*/
div{
width: 100px;
height: 100px;
background: greenyellow;
margin: 100px 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
2.padding
<style>
/*
//传一个参数 四个方向都改变
//传两个参数 第一参数top,bottom 第二个参数left,right
//传三个参数
第一个参数top 第一参数left,right 第三个参数bottom
//传四个参数 top,right,bottom,left
*/
div{
width: 100px;
height: 100px;
background: purple;
padding: 100px 200px 300px;
}
</style>
</head>
<body>
<div>
</div>
</body>
3.元素位置
<style>
*{margin:0;padding:0;}
div{
width: 100px;
height: 100px;
background: yellow;
padding:20px;
}
/*
元素内容的起始位置，是基于它本身的width,height的起始位置
*/
</style>
</head>
<body>
<div>
hello world
</div>
</body>
4.标签的分类
<style>
h1{
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
margin-bottom: 100px;
}
a{
width: 100px;
height: 100px;
background: pink;
margin-top: 100px;
margin-bottom: 100px;
}
input{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--
h1,p,div,ul,li,dl,dt,dd
块标签
特点：1.独占一行
2.能设置width,height
-->
<h1>hello</h1>
<p>pppp</p>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<dl>
<dt>tttt</dt>
<dd>dddd</dd>
</dl>
<div>vvvvv</div>
<!--
内联标签
特点：1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
-->
<a href="#">aaaa</a><span>ssss</span><i>iiii</i><em>eeee</em><strong>rrrr</strong>
<br>
<!--
内联块
input,img,button
特点：1.并排显示
2.能设置width,height
-->
<input type="text">
<img src="images/icon1.png" alt="">
<button>btnbtn</button>
</body>
5.混合区分
<style>
/*内联元素和内联块水平居中
{
dispaly:block;
margin-left:auto;
margin-right:auto;
}
块标签默认 display:block;
内联默认 dispaly:inline;
内联块默认 display:inline-black
*/
span{
display:block;
margin-left: auto;
margin-right: auto;
background: red;
width:100px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<span>ssss</span>
<br>
<img src="images/icon1.png" alt="">
</body>
6.水平居中
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<!--
不改变内联和内联块的display属性 实现水平居中
实现方案：
parentElement{
text-align:center;
}
-->
<span>span</span> <br>
<img src="images/icon1.png" alt="">
</body>
7.选择器
<style>
/* p{
color:red;
} */
/* .one{
color:yellow;
} */
/* #two{
color:green;
} */
/* 伪类选择器 */
/* p:hover{
color:firebrick;
} */
/* 分组选择器 */
p,h1,div{
color:red;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
</body>
8.后代选择器
<style>
/*
.parent>p{} 亲儿子
*/
/* .parent>p{
color:red;
} */
/* .parent p{} 选择parent之后的所有p元素 */
.parent p{
color:red;
}
</style>
</head>
<body>
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
<p>hello world</p>
</div>
</body>
9.兄弟选择器
<style>
/*
兄弟选择器
div+p{} -->选中div之后的第一个p元素
div~p{} -->选中div之后的所有p元素
*/
/* div+p{
color:red;
} */
div~p{
color:yellow;
}
/*
伪类选择器
input:focus{}
*/
input:focus{
background: #ff2d51;
}
</style>
</head>
<body>
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<input type="text">
</body>
10.伪元素
<style>
/*
伪元素-->用css自定义生产的元素
div:before{
content:""
}
*/
div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}
div:after{
content:"后面";
display: block;
width:100px;
height:50px;
background:yellow;
}
</style>
</head>
<body>
<div>
content
</div>
</body>
11.属性选择器
<style>
/* 属性选择器
语法
element[attr=value]{
}
*/
[class="one"]{
color:red;
}
</style>
</head>
<body>
<p class="one">hello world</p>
</body>
12.选择器的优先级别
<style>
/*!important> id>class>p{} */
p{
color:red !important;
}
.one{
color:yellow;
}
#two{
color:green;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
</body>
13.选择器的权重
<style>
/* 选择器嵌套的层次越深,那么权重越高 */
.child{
color:red;
}
.parent>.child{
color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
