今天所学到的如下：
AM
1.盒子模型的传参
<style>
div{
width: 100px;
height: 100px;
background: red;
margin:100px 200px 300px;
}
</style>
注释： margin：100px 四个方向全部改变
margin：100px 200px top，bottom--100px;left,right--200px
margin: 100px 200px 300px top--100px;right,left--200px;bottom--300px
margin: 100px 200px 300px 400px 按顺时针转
2.padding
<style>
div{
width: 100px;
height: 100px;
background: red;
padding:20px 30px 40px;
}
</style>
注释：传一个参数 四个方向都改变
传两个参数 第一参数top,bottom;第二参数left,right
传三个参数 第一参数top;第二参数left,right;第三个参数bottom
传四个参数 top,right,bottom,left
3.
<style>
*{margin: 0;padding: 0}
div{
width: 300px;
height: 300px;
background: rebeccapurple;
padding: 20px;
}
</style>
注释：元素内容的起始位置，是基于它自身width，height的起始位置
4.标签的分类
<style>
div{
width: 100px;
height: 100px;
background: rebeccapurple;
margin-top: 100px;
margin-bottom: 100px;
}
a{
width: 100px;
height: 100px;
background: rebeccapurple;
margin-top: 100px;
margin-bottom: 100px;
}
input{
width:100px;
height:100px;
/* display:inline-block */
}
</style>
<body>
<!--
h1,p,div,ul,li,dl,dt,dd块标签
特点：1.独占一行 2.能设置width,height
-->
<h1>h1</h1>
<p>p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<div>div</div>
<!--
内联标签
特点：1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom
-->
<a href="#"></a> <span>span</span> <i>i</i> <em>em</em> <strong>strong</strong>
<br>
<!--
内联块
input,img,button
特点：1.并排显示 2.能设置width,height
-->
<input type="text">
<img src="images/icon1.png" alt="">
<button>button</button>
</body>
5.
<style>
/*
内联元素和内联块元素水平居中
{
display:block;
margin-left: auto;
margin-right: auto;
}
*/
/*
块标签默认display:block;
内联默认 display:inline;
内联块默认 display:inline-block
*/
span{
display: block;
margin-left: auto;
margin-right: auto;
background: rebeccapurple;
width: 100px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<span>span</span>
<br>
<img src="images/icon1.png" alt="">
</body>
6.水平居中
<style>
body{
text-align: center;
}
</style>
<body>
<!--
不改变内联和内联块的display属性 实现水平居中
实现方案:
parentElement{
text-align:center;
-->
<span>span</span><br>
<img src="images/icon1.png" alt="">
</body>
PM
1.分组选择器
<style>
/*p{
color:red;
}
*/
/*.one{
color:red;
}
*/
/*.#two{
color:red;
}
*/
/*伪装选择器*/
/*
p:hover{
color:firebrick;
}
*/
/*分组选择器*/
p,h1,div{
color:aqua;
}
</style>
<body>
<p class="one">hello world</p>
<h1>h1</h1>
<div>div</div>
2.后代选择器
<style>
/*
.parent>p{} 亲儿子
*/
/*
.parent>p{
color: aquamarine;
}
*/
/*
.parent>p{} 选择parent之后的所有p元素
*/
.parent>p{
color: aquamarine;
}
</style>
<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>
3.兄弟选择器
<style>
/*
兄弟选择器
div+p{}-->选中div之后的第一个p元素
div~p{}-->选中div之后的所有元素
*/
/*
div+p{
color:tomato;
}
*/
div~p{
color:tomato;
}
/*
伪装类选择器
*/
input:focus{
background: pink;
}
</style>
<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>
4伪元素
<style>
/*
伪元素-->用css自定义生产的元素
div:before{
content:"";
}
*/
div:before{
width: 100px;
height: 100px;
background: red;
content:"前面";
display: block;
}
div:after{
content: "后面";
display: block;
width: 100px;
height: 50;
background: yellow;
}
</style>
</head>
<body>
<div>
content
</div>
5.属性
<style>
/*
属性选择器
语法
element[attr=value]
*/
[class="one"]{
color: yellowgreen;
}
</style>
<body>
<p class="one">hello world</p>
</body>
6.选择器的优先级别
<style>
/*!important>id>class>p{} */
p{
color: red !important;
}
.one{
color: yellow;
}
#two{
color: green;
}
</style>
<body>
<p class="one" id="two">hello world</p>
</body>
7.选择器的权重
<style>
/* 选择器嵌套的层次越深，那么权重越高*/
.child{
color: red;
}
.parent>.child{
color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
网友评论