前端学习笔记-CSS

五彩糖纸 發表於 2019-12-6 23:51:00

<h1>CSS的引入方式：</h1>
　　1、内嵌式引入：在标签内直接使用style属性，每个样式使用分号隔开。
<div class="cnblogs_code">
<pre>1 <div style="color: red;font-size:25px ;
2 font-family: 'Microsoft Yahei';line-height: 50px">
3 窗前明月光， 
4 疑是地上霜。 
5 举头望明月， 
6 低头思故乡。 
7 </div></pre>
</div>
　　2、外联式引入：使用link标签引入本地css样式文件。
<div class="cnblogs_code">
<pre>1 <link rel="stylesheet" type="text/css" href="main.css"></pre>
</div>
<h1>CSS选择器：</h1>
　　1、标签选择器：当前html下的所有div样式都是被设置成这样。
<div class="cnblogs_code">
<pre>div{
color: red;
}</pre>
</div>
　　2、id选择器：只能选择一个标签的一个id,但权重要比类选择器大。
<div class="cnblogs_code">
<pre>#div2{
color: green;
}</pre>
</div>
<div class="cnblogs_code">
<pre><div id="div2">遥看瀑布挂前川。</div></pre>
</div>
　　3、类选择器：可选择多个标签，拓展性高（主要使用）。
<div class="cnblogs_code">
<pre>.gold{
color: gold;
}</pre>
</div>
<div class="cnblogs_code">
<pre><div class="gold">飞流直下三千尺，</div></pre>
</div>
　　4、层级选择器：即在class类选择器下空格加个标签，从而实现只修改某个类下的某个标签下的内容。
<div class="cnblogs_code">
<pre>.list li{
height: 30px;
}</pre>
</div>
<div class="cnblogs_code">
<pre><div class="list">遥看瀑布挂前川。</div></pre>
</div>
<h1>CSS元素层级：</h1>
　　同层级哪个先写先显示哪个，使用z-index打破层级限制，数值越大，越优先显示。
<div class="cnblogs_code">
<pre>1 body .box2{
2 background-color: green;
3 left: 50px;
4 top: 50px;
5 z-index: 2
6 }</pre>
</div>
<h1>CSS元素特点：</h1>
<h4>1、块元素的特点：</h4>
　　独占一行，多个块元素各自另起一行，默认块元素会自动填充父级元素的宽度，
　　可设置宽高，但是还是会独占一行，
　　块元素可以设置margin和padding。
<h4>2、行内元素的特点：</h4>
　　不支持宽高、margin的上下、padding的上下(左右都支持)；
　　宽高由文字；
　　代码换行，会产生间距（如下图第一个图，盒子中两个a标签换行书写时，产生间距）。
　　解决间距：将父级元素设置为font-size：0    行内元素自身再设置相应的font-size；
<h4>3、行内块元素的特点：</h4>
　　具有块元素的特点，可以设置宽高，也具有行内元素的特点，代码换行产生间距。
　　行内块元素不会独占一行，多个相邻的行内块元素排在一行内，排不下就换行。
<div class="cnblogs_code">
<pre> 1 .con1,.con2{
 2 width: 500px;
 3 height: 80px;
 4 border: 1px solid #333;
 5 margin: 50px auto 0;
 6 font-size: 0;//关键在这行
 7 }
 8 .con1 a{
 9 background: gold;
10 text-decoration: none;
11 width: 20px;
12 height: 40px;
13 padding:0px 20px;
14 font-size: 20px;
15 }</pre>
</div>
<div class="cnblogs_code">
<pre>1 <body>
2 <div class="con2">
3 <a href="#">锄禾日当午,</a>
4 <a href="#">汗滴禾下土。</a>
5 </div>
6 </body></pre>
</div>
　　　　显然行内元素没有按照高40px，宽20px进行渲染。
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206182115969-2030441090.png">
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206182237927-1570884175.png">
块元素、行内元素、行内块元素的关系：
　　块元素宽、高均能设置，
　　行内元素无法设置其宽和高，宽高随标签里的内容变化，
　　行内块元素实际就是把块元素以行的形式展现出来，保留了块元素可以设置的对应的属性。
<h1>css常用文本样式:</h1>
　　1、font同时设置文字的几个属性，写的顺序有兼容性问题，建议按照如下顺序写：font：是否加粗字号/行高字体如：font：normal 12px/36px '微软雅黑'; 　　2、a标签设置的网页链接，如果是网络网页连接，必须加http://； 　　3、text-decoration去a标签的下划线，text-decoration: none； 　　4、p标签加hover，鼠标移至目标内容，目标变色。 p:hover{} ； 　　5、除了字体的设置和文本的倾斜设置，值都不加引号； 　　6、针对中文版式，text-indent设置文字首行缩进； 　　7、text-align不能给em标签对齐，可以给h标签对齐。因为他们的宽度不同。详细看块元素和内联元素及内联块元素的区别。
<h1>背景设置：</h1>
<div class="cnblogs_code">
<pre> 1 .box{
 2 width: 500px;
 3 height: 700px;
 4 border:5px solid #000;
 5 background-color: gold;/*背景设置颜色*/
 6 font-size: 50px;/*设置字号*/
 7 background-image: url(../H5/images/tu1.png);/*背景设置图片*/
 8 /*页面上放图片可以通过a标签和这种方式来实现。a上不能放内容*/
 9 background-repeat: repeat-x;/*仅仅横向平铺,y纵，no-repeat不平铺，默认全部平铺*/
10 background-position: center top;
11 /*默认靠左靠上，配合上边的repeat使用，也可用具体像素值控制位置。了解一下attachment属性*/
12 /*background: url(../H5/images/tu1.png) -20px -20px gold no-repeat;一句话实现*/
13 }</pre>
</div>
<h1>CSS定位：</h1>
　　使用position属性进行定位。
<div class="cnblogs_code">
<pre> 1 .box{
 2 width: 450px;
 3 height: 300px;
 4 border: 1px solid #000;
 5 margin: 100 auto 0;
 6 position: relative;/*相对于body绝对定位*/
 7 }
 8 .box div{/*相对于box相对定位*/
 9 width: 200px;
10 height: 100px;
11 margin: 20px;
12 background: blue;
13 line-height: 100px;/*文字操作*/
14 text-align: center;/*文字操作*/
15 font-size: 40;/*文字操作*/
16 }
17 body .box1{
18 position: absolute;
19 /*相对定位relative其他东西不变，盒子相对自身位置发生偏移*/
20 /*绝对定位absolute根根据父级位置定位来定位，父级一般设置为相对定位，
21 若父级及祖父级..无定位，则根据body定位*/
22 /*定位后转换成行内块元素，靠内容撑开宽度*/
23 left: 50px;
24 top: 50px;
25 background-color: gold;
26 }
27 body .guding{
28 position:fixed;
29 left: 0;
30 top:0;
31 background: pink;
32 }
33 .box2{
34 background-color: pink;
35 position: absolute;/*定位后转换成行内块元素，靠内容撑开宽度*/
36 left: 100px;
37 top: 100px;
38 }</pre>
</div>
<div class="cnblogs_code">
<pre>1 <div class="box">
2 <div class="box1">111</div>
3 <div>222</div>
4 <div>333</div>
5 <div class="guding">444</div>
6 </div> </pre>
</div>
 
 <img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206185447966-1014660538.png">
<h1> CSS盒子模型：</h1>
<div class="cnblogs_code">
<pre> 1 　　　　　　.box{
 2 width: 400px;
 3 height: 400px;
 4 background: gold;
 5 border: 100px solid #000;
 6 /*省略-top、-left等。*/
 7 /*这条线是加给盒子外边的*/
 8　　　　　　 /*设置盒顶线型，solid实线、dashed虚线、dotted点线。*/
 9 padding: 20px;
10 /*这个padding其实是内容同盒子的内边距*/
11 /*四个值时是上、右、下、左*/
12 /*三个值时是上、左右、下*/
13 /*三个值时是上下、左右*/
14 /*盒子的真实尺寸是width/height+padding+border*/
15 margin:100px auto;
16 /*auto是设置平分边距*/
17 }
18 .sings{
19 font-size:80px;
20 color: blue;
21 line-height: 80px;
22 }</pre>
</div>
<div class="cnblogs_code">
<pre>1 <div class="box sings">关关雎鸠， 
2 在河之洲。 
3 窈窕淑女， 
4 君子好逑。 
5 </div></pre>
</div>
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191207090221991-1552779546.png">
黑色部分是盒子边框线border的宽度，内容同盒子的内边距是padding值，可容纳内容的宽高为weight和height。
 盒子的真实占地尺寸大小为：
　　盒子的宽度：width+左右padding+左右的border值。
　　盒子的高度：height+上下的padding+上下的border值。
盒子模型的特点：
　　1、如果不设置盒子的高度，盒子会根据里边的内容，自动撑开成合适的高度。
　　2、固定盒子宽高后，内容太多，overflow可以清除浮动、隐藏溢出，产生滚动条等，auto自动产生溢出方向的滚动条。
　　3、margin最好不要同时设置top和buttom，否则会产生外边距被合并的现象，合并后的外边距高度等于被合并中的高度较大者。
　　　　解决方法：只设置margin-top或将元素浮动或定位。
　　4、margin-top塌陷：给嵌套的内盒子设置margin，外盒子会出现top效果。
　　　　解决办法：使用伪元素，引用代码如下。
<div class="cnblogs_code">
<pre>1 .clearfix:before{
2 content: "";
3 display: table;
4 }</pre>
</div>
<h1> CSS浮动特点：</h1>
<div class="cnblogs_code">
<pre>.box1,.box2,.box3{
 width: 200px;
 height: 200px;
 font:30px/200px 'Microsoft Yahei';
 background: green;
 margin: 20px;
 }
 .box1{
 float: left;
 }
 .box2{
 float: right;
 }
 .box3{
 float: left;
 }</pre>
</div>
<div class="cnblogs_code">
<pre>1 <div class="box1">1</div>
2 <div class="box1">1</div>
3 <div class="box1">1</div>
4 <div class="box1">1</div>
5 <div class="box1">1</div>
6 <a href="#" class="box1">这是一个a元素</a>
7 <div class="box2">2</div>
8 <div class="box3">3</div></pre>
</div>
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206203806477-1984041986.png">
 
　　文档流盒布局：指盒子按照html标签编写的顺序依次从上到下，从左到右排列， 　　块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。 　　浮动特性：向左或向右，没有居中浮动那么二的想法哦。 　　　　1、浮动元素有左浮动(float:left)和右浮动(float:right)两种。 　　　　2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来(浮动的顺序看代码的执行顺序)。 　　　　3、相邻浮动的块元素可以并在一行，超出父级宽度就换行。 　　　　4、浮动让行内元素或块元素自动转化为行内块元素(划重点)。 　　　　5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。 　　　　6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动。 　　　　7、浮动元素之间没有垂直margin的合并(margin-top塌陷)。
<h1>清除浮动：</h1>
<div class="cnblogs_code">
<pre> 1 .box2 a{
 2 width: 50px;
 3 height: 50px;
 4 background-color: green;
 5 border: 1px solid #000;
 6 font-size: 16px;
 7 margin:20px;
 8 text-align: center;
 9 line-height: 50px;
10 text-decoration: none;
11 float: left;/*这个浮动的子元素无法撑开父级的特性,需要清除浮动。*/
12 }
13 .clearfix:after{/*常用这种*/
14 content: "";
15 display: table;
16 clear: both;
17 }
18 .clearfix:before,.clearfix:after{/*合并margin-top的塌陷和清除浮动的共同操作*/
19 content: "";
20 display: table;
21 }</pre>
</div>
<div class="cnblogs_code">
<pre> 1 <div class="box2 clearfix">
 2 <a href="">1</a>
 3 <a href="">2</a>
 4 <a href="">3</a>
 5 <a href="">4</a>
 6 <a href="">5</a>
 7 <a href="">6</a>
 8 <a href="">7</a>
 9 <a href="">8</a>
10 <a href="">9</a>
11 </div></pre>
</div>
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206205259949-798198967.png"><img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206205318203-568423940.png">
 
<h1>新闻列表案例：</h1>
<div class="cnblogs_code">
<pre> 1 .new_list_con{
2 width: 600px;
3 height: 290px;
4 border: 1px solid #ddd;
5 margin: 50px auto 0;
6 overflow: hidden;/*消除溢出的li面积*/
7 }
8 .new_list_con h3{
9 width: 560px;
10 height: 50px;
11 border-bottom: 1px solid #ddd;
12 margin: 0px auto;
13 }
14 .new_list_con h3 span{/*注意是H3下的span,s设置那条下划线。将其行内元素转化为行内块元素*/
15 display: inline-block;/*转为行内块元素*/
16 height: 50px;/*高与h3等高*/
17 border-bottom: 2px solid red;
18 font: 18px/50px 'Microsoft Yahei';/*行高50居中，18宽度，雅黑字体*/
19 color:#000;
20 padding: 0 15px;/*上下不设，左右设置15px*/
21 position: relative;/*保持原来的位置但它是跳出来的*/
22
23 }
24 .new_list_con ul{
25 list-style: none;/*去点*/
26 padding: 0;/*紧凑一点*/
27 width: 560px;
28 height: 238px;
29 margin: 6px auto 0;/*ul块元素相对父级设置剧中*/
30 }
31 .new_list_con ul li{
32 height: 38px;
33 border-bottom:1px solid #ddd;
34 }
35 .new_list_con ul a{
36 float: left;/*浮动后就变成行内块元素了*/
37 height: 38px;
38 /*line-height: 38px ul 38行高38，文字就上下居中了*/
39 font:14px/38px 'Microsoft Yahei';/*先宽后高再字体*/
40 text-decoration: none;/*取消下划线*/
41 color: #000;
42 }
43 .new_list_con ul a:before{
44 content: "· ";/*给每个列表前加个点点*/
45 }
46 .new_list_con ul a:hover{/*鼠标移至变色*/
47 color:red;
48
49 }
50 .new_list_con ul span{
51 float: right;/*浮动后就变成行内块元素了*/
52 height: 38px;
53 /*line-height: 38px ul 38行高38，文字就上下居中了*/
54 font:14px/38px 'Microsoft Yahei';/*先宽后高再字体*/
55 color: #000;
56 }</pre>
</div>
<div class="cnblogs_code">
<pre> 1 <div class="new_list_con">
2 <h3>新闻列表</h3>
3 <ul>
4 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-1</li>
5 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-2</li>
6 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-3</li>
7 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-4</li>
8 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-5</li>
9 <li><a href="">劲爆消息：宁理小红花一箭夺魁！</a>9012-10-6</li>
10 </ul>
11 </div></pre>
</div>
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191206202745858-2051439408.png">
<h1>菜单栏布局实例：</h1>
<div class="cnblogs_code">
<pre> 1 .menu{
 2 list-style: none;/*取消黑点*/
 3 background-color: #55a8ea;
 4 padding: 0;/*取消ul自带的padding样式*/
 5 height: 40px;
 6 width: 960px;
 7 margin: 50px auto 0;
 8 position: relative;
 9 }
10 .menu li{
11 float: left;
12 width: 100px;
13 height: 40px;/*给每个li设置自己的宽高*/
14 text-align: center;/*每个li垂直居中*/
15 line-height: 40px;/*文字行高*/
16 }
17 .menu li a{
18 font:14px/40px 'Microsoft Yahei';/*字体格式不舍涉及颜色需要另外写*/
19 color: #fff;
20 text-decoration: none;/*给列表去点*/
21 }
22 .menu li:hover{
23 background-color: #00619f;/*鼠标移至会变色*/
24 }
25 .menu .active{
26 background-color: #00619f;/* 当前页显示突出颜色*/
27 }
28 .menu .new{
29 width: 32px;
30 height: 21px;
31 background: url(../H5/images/new.png) no-repeat;/*no-repeat设置不平铺*/
32 position: absolute;/*绝对定位*/
33 left: 345px;/*这里用技巧定位距离*/
34 top:-9px;
35 }
36 .menu .new:hover{
37 background: url(../H5/images/new.png) no-repeat;
38 }</pre>
</div>
<div class="cnblogs_code">
<pre> 1 <ul class="menu">
 2 <li class="active"><a href="">首页</a></a></li>
 3 <li><a href="">网站建设</a></li>
 4 <li><a href="">招聘信息</a></li>
 5 <li><a href="">培训方案</a></li>
 6 <li><a href="">学习系统</a></li>
 7 <li><a href="">公司简介</a></li>
 8 <li><a href="">售后服务</a></li>
 9 <li class="new"></li>
10 </ul></pre>
</div>
<img src="https://img2018.cnblogs.com/i-beta/1878196/201912/1878196-20191207102023683-1678156521.png">
 
 
 
 
 
 
　　
 
 
 
　　 
来源：https://www.cnblogs.com/mrliu0327/p/12000217.html

頁: [1]

琼殿技术论坛's Archiver

前端学习笔记-CSS