1.浏览器是把 html 和 css 一起下载并执行的，计算机里把两件事情同时做异步加载。计算机中的同步异步和我们生活中的正好是相反的。

补充：

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

2.通配符：*{padding:0; margin:0;}

4.css 权重，优先级大小排序：括号里写具体的权重值

!important（Infinity）>行间样式（1000）>id（100）>class/属性/伪类（10）>标

签/伪元素（1）>通配符（0）

写页面总结：

1.css图片和文字同一行显示

问题其实很好解决，只要设定img标签的vertical-align CSS属性就好了，代码如下：

<img src="data:images/untitled.png" style="width:30px;height:30px;padding:0px;margin:0px;vertical-align:middle;"/>
<span>居中显示的文字</span>

2.搜素框架搜索图标，还有提示文字

css图片文字

html代码：

 <i class="icon-search"></i>   搜索

 <input type="text" class="inputText" placeholder=" 大家都在搜索'奥迪Q7'" >

 <i class="icon-speech" ></i>  语音

css代码：

 header input {

 border-style:none; //去掉input默认样式

 width: 83%;

 height: 30px;

 margin-left: 3%;

 border-radius: 5px;

 background-color: #EEEDED;

 border: 1px solid #8e8e8e;

 text-indent: 20px;

 outline: none;

 }

 header .icon-search {

 background: url(../img/search.png) no-repeat;

 width: 21px;

 height: 21px;

 position: absolute;

 top: 20px;

 left: 16px;

 }

 header .icon-speech {

 background: url(../img/speech.png) no-repeat;

 width: 21px;

 height: 21px;

 position: absolute;

 top: 20px;

 left:78%;

 }

 header .icon-remind {

 background: url(../img/remind.png) no-repeat;

 width: 22px;

 height: 22px;

 position: absolute;

 top: 20px;

 right: 15px;

 transform: scale(1.5);

 }

3.设置手机端input文本框提示文字大小

css图片文字

 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{

 /*color:#666;

 font-size:16px; */

 font-family: PingFangSC-Regular;

 font-size: 13px;

 color: #999593;

 text-align: left;

 line-height: 26px;

 }

4.去除文本框边框，背景色

background-color: transparent;

border: none;

5.上方图片，下方文字布局

css图片文字

html

 <div class="login-way">

 <div id="wechat" class="subMenu text-center" data-src="">

 <img class="menu_img-wetchat" src="../../images/wechat.png" data-imgname="choosecar" />

 <div class="menu_name">微信</div>

 </div>

 <div id="QQ" class="subMenu text-center" data-src="">

 <img class="menu_img" src="../../images/QQ.png" data-imgname="choosecar" />

 <div class="menu_name">QQ</div>

 </div>

 <div id="weibo" class="subMenu text-center" data-src="">

 <img class="menu_img-weibo" src="../../images/weibo.png" data-imgname="choosecar" />

 <div class="menu_name">微博</div>

 </div>

 </div>

css

 .login-way{

 margin-top: 5%;

 height: 30px;

 /*border: 1px solid #0000FF;*/

 }

 .subMenu {

 width: 33%;

 float: left;

 cursor: pointer;

 }

 .menu_name {

 height: 20px;

 width: 100%;

 line-height: 20px;

 font-family: PingFangSC-Regular;

 font-size: 10px;

 color: #999593;

 }

 img.menu_img {

 height: 20px;

 width: 17px;

 }

 img.menu_img-wetchat {

 width: 25px;

 height: 20px;

 }

 img.menu_img-weibo {

 width: 22px;

 height: 18px;

 }

 img {

 vertical-align: middle;

 border:;

 }

 .active {

 color: #FFA129;

 }

 .text-center {

 text-align: center

 }

css设置input 提示文字距离边框距离

 text-indent：{12px}

6.文本缩进
text-indent: 缩进距离
12px相当于一个文字距离

css图片文字

7.css 设置元素水平垂直居中

①弹性布局

 <div class="parent">

 <div class="child">我只是个孩子</div>

 </div>

 .parent {

 display: flex;

 justify-content: center;

 align-items: center;

 width: 100%;

 height: 200px;

 border: 1px solid #FF9900;

 /*margin: 0 auto;*/

 }

 .child {

 width: 100px;

 height: 100px;

 border: 1px solid skyblue;

 text-align: center;

 vertical-align: middle;

 }

css图片文字

②定位+转化

<div class="parent">

<div class="child">Demo</div>

</div>

 .parent {

 position: relative;

 width: 400px;

 height: 400px;

 background: skyblue;

 }

 .child {

 position: absolute;

 left: 50%;

 top: 50%;

 transform: translate(-50%, -50%);

 width: 200px;

 height: 200px;

 background: pink;

 }

css图片文字

③ 单元格

<div class="parent">

<div class="child">单元格方式</div>

</div>

 .parent {

 display: table-cell;

 text-align: center;

 vertical-align: middle;

 width: 400px;

 height: 400px;

 background: skyblue;

 }

 .child {

 display: inline-block;

 width: 200px;

 height: 200px;

 background: pink;

 }

css图片文字

8.css 设置头部，滚动条滚动时如何让上面的标题固定不动

html :

头部

<header>

<i class="icon-speech"></i>

<input type="text" class="inputText" placeholder="奥迪Q7">

<div class="cancelspan">取消</div>

</header>

内容div

<div class="content">

<div class="search">

<span class="logo">

<img src="../img/aodi.png">

</span>

<span class="name">奥迪</span>

<span class="pindao ">去品牌频道> </span>

</div>

<div class="middle">

<!--div class="result"></div>-->

<!--<div class="result">

<div class="reslut-img">

<img src="../img/caroutside.png">

</div>

<div class="reslut-desc">

<div class="reslut-desc-brandname">奥迪Q7L 2.0T</div>

<div class="reslut-desc-brandprice">厂商指导价：68.38-96.28万</div>

</div>

</div>

<div class="result">

<div class="reslut-img">

<img src="../img/caroutside.png">

</div>

<div class="reslut-desc">

<div class="reslut-desc-brandname">奥迪Q7L 2.0T</div>

<div class="reslut-desc-brandprice">厂商指导价：68.38-96.28万</div>

</div>

</div>-->

</div>

<div class="recommended">

<p>智能推荐</p>

<div class="recommended-chancel"></div>

<!--<div class="result">

<div class="reslut-img">

<img src="../img/caroutside.png">

</div>

<div class="reslut-desc">

<div class="reslut-desc-brandname">奥迪Q7L 2.0T</div>

<div class="reslut-desc-brandprice">厂商指导价：68.38-96.28万</div>

</div>

</div>-->

<!--<div class="result">

<div class="reslut-img">

<img src="../img/caroutside.png">

</div>

<div class='reslut-desc'>

<div class='reslut-desc-brandname'>奥迪Q7L 2.0T</div>

<div class='reslut-desc-brandprice'>厂商指导价：68.38-96.28万</div>

</div>

</div>

<!--<div class="result">

<div class="reslut-img">

<img src="../img/caroutside.png">

</div>

<div class="reslut-desc">

<div class="reslut-desc-brandname">奥迪Q7L 2.0T</div>

<div class="reslut-desc-brandprice">厂商指导价：68.38-96.28万</div>

</div>

</div>-->

</div>

</div>

css 样式

header {

position: fixed; //固定定位

z-index:;

height: 50px;

line-height: 50px;

width: 100%;

color: #fff;

font-family: "PingFang-SC-Medium";

font-weight:;

font-size: 20px;

/*border: 1px solid #000000;*/

}

.content {

position: absolute; //绝对定位

top: 50px;

right:;

bottom:;

left:;

width: 100%;

height: auto;

overflow-y: scroll;//滚动区域}

} css图片文字

9.css设置img标签在div垂直居中定位方式

html:

<div class="mui-divimg">

<img src="../../images/person_setup.png">

</div>

css:

.mui-divimg {

float: right;

/*text-align: center;

vertical-align: middle;*/

position: relative;

width: 40px;

height: 40px;

/*border:1px solid #FFFFFF;*/

}

.mui-divimg img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 30px;

height: 30px;

/*vertical-align: middle;

width:20px;

height: 20px;

}

css图片文字

10.css实现一行文字居中，多行文字左对齐

css图片文字

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    /*当文字为一行是，则P的宽度小于div的宽度，p标签居中显示在盒子内，文字也就居中了 ;当大于一行时，P的宽度和div的宽度是一致的 ,文字就居左对齐了*/

    .content {  width: 200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}

    /*display: inline-block使P的宽度根据文字的宽度伸缩 */

    .content p {  text-align: left;  display: inline-block  }

</style>

<body>

<div class="content">

    <p>内容只有一行居中</p>

</div>

<br>

<div class="content">

    <p>内容多行左对齐，内容多行左对齐</p>

</div>

</body>

</html>

②

css图片文字

11.设置div中两个div相对左右居中

html代码

<div class="mui-songlist">

<div class="mui-songlist-colletion">

<!--<img src="../../images/album3.jpg"> -->

</div>

<div class="mui-songlist-minesonglist"></div>

<div class="mui-songlist-minedownload"></div>

<div class="mui-songlist-recenrplay"></div>

</div>

css代码

.mui-songlist{

margin: -5% auto;

height: 400px;

width: 90%;

border: 1px solid purple;

padding: 0 auto;

padding: 1% auto;

}

.mui-songlist div{

width: 48%;

height: 178px;

border: 1px solid red;

float: left;

margin: 1% 1%;//设置div标签margin值

}

css图片文字

12.css中div 右边显示半圆

<div class="container-middle-right">

<div></div>

</div>

css

.container-middle-right div{

margin-left: 22%;

margin-top: 7%;

width: 78%;

height: 80%;

/* margin: 0 auto; */

padding: 0 auto;

background: #ec2e2e;

border-radius: 163px 0px 0px 163px;

border-radius: 163 0 50px 50px;

/* background-repeat: no-repeat; */

}

css图片文字

13.css去除图片默认间隙

<div class="container-bottomimg">

　　<img src="../img/index-bottom-one.png" >

　　<img src="../img/index-bottom-two.png" >

　　<img src="../img/index-bottom-three.png" >

　　<img src="../img/index-bottom-four.png" >

</div>

css:

.container-bottomimg{

margin: 5% auto;

width:100%;

height:450px;

border:1px solid #008000;

letter-spacing:-800px;//<!--letter-spacing的值无论是负多少都不会产生重叠-->

}

css图片文字

14.css清除浮动

父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集

需要左右排列的block采用浮动布局，且父级一定要清浮动

①：.浮动的标签:after { content: ''; display: block; clear: both; }

②;.浮动标签下一个要显示的标签(会受到他浮动影响的):before { content: ''; display: block; clear: both; }

15.瀑布流css实现

效果图：

css图片文字

html

<div class="main">

//第一列

<div class="column-item">

<div class="box pl0">

<div style="height:352px;background:blue;">1</div>

<div style="height:392px;background:rgb(12, 192, 192);margin-top:10px;">2</div>

<div style="height:405px;background:rgb(12, 192, 192);margin-top:10px;">2</div>

</div>

</div>

//第二列

<div class="column-item">

<div class="box">

<div style="height:279px;background:rgb(133, 12, 106);">2</div>

<div style="height:478px;background:rgb(212, 149, 12);margin-top:10px;">1</div>

<div style="height:305px;background:rgb(12, 192, 192);margin-top:10px;">2</div>

</div>

</div>

//第三列

<div class="column-item">

<div class="box">

<div style="height:396px;background:red;">2</div>

<div style="height:330px;background:pink;margin-top:10px;">3</div>

<div style="height:432px;background:rgb(12, 192, 192);margin-top:10px;">2</div>

</div>

</div>

//第四列

<div class="column-item mg0">

<div class="box prl0">

<div style="height:380px;background:green;">3</div>

<div style="height:460px;background:pink;margin-top:10px;">3</div>

<div style="height:379px;background:rgb(12, 192, 192);margin-top:10px;">2</div>

</div>

</div>

</div>

css:

<style>

body {

background: #eee;

}

* {

padding:;

margin:;

}

.main {

width: 1200px;

margin: 50px auto;

}

.main::after {

content: "";

display: block;

clear: both;

}

.main .column-item {

width: 1200px;

}

/*不用设置高度*/

.main .mg0 {

margin-right:;

}

.main .column-item .box {

float: left;

width: 292px;

/*=(1200-30)/4 = 292.5*/

padding: 0 5px;

}

/*关键点，因为column-item不设置高度，所以只要设置float:left;那么所有的box就会向左边浮动，得到所需的4分列效果*/

.main .column-item .pl0 {

padding-left:;

}

/*头尾两边都要清掉相应以便的padding,不然不会得到4分等列效果*/

.main .column-item .prl0 {

padding-right:;

}

</style>

16.设置背景图片大小尺寸

css图片文字

background: url(../img/nextBtnTop.png) 0 0 no-repeat;

background-size: 100% 69%;

17.css设置字体段落首行缩进，字体间距

效果

<div id="content">

<p>很多人拍海都说没有感觉,只能使用一些摄影技巧来弥补这一缺憾,本人第一-次拍海也和大家样,直到无意间听到张惠妹歌曲《听海》, 才明白其中玄机，拍海要把大海当做恋人,用心去体会大海的情绪,平静时如温婉少女,含蓄时内敛深沉,激情时波涛汹涌,在配合合适的摄影技巧来表现,才能得到想要的画面效果。 </p>

</div>

css

#content p {

/* height: 30px; */

line-height: 2.3;

text-indent: 2em;     //首行缩进

color: #191919;

font-size: 16px;

font-family: "微软雅黑";

width: 96%;

margin: 0 auto;

letter-spacing: 2px;  //字体间距

font-weight:;

}

18.设置盒子里的几个div两侧没有间隙，几个div之间有间隙

html：

<div id="main">

<div style="background-color:coral;"></div>

<div style="background-color:lightblue;"></div>

<div style="background-color:khaki;"></div>

<div style="background-color:pink;"></div>

</div>

css:

#main {

width: 400px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-justify-content: space-around; /* Safari 6.1+ */

display: flex;

justify-content:space-between;

}

#main div {

width: 70px;

height: 70px;

}

19.用伪元素给字体下方加横线

css图片文字

html:

<ul>

<li class="active">推荐</li>

<li>汽车</li>

<li>娱乐</li>

<li>游泳</li>

<li>美食</li>

<li>生活</li>

<li>设计</li>

</ul>

css:

.variety-title ul li {

float: left;

width: 13%;

font-size: 18px;

font-weight:;

text-align: left;

position: relative; //给li相对定位

}

.variety-title ul li.active {

color: #0f71bd;

font-weight: bold;

transition: 0.2s all linear;

}

.variety-title ul li.active::after {

content: "";                      //:after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

display: block;

position: absolute;        //div绝对定位

bottom: 6px;

left: 3px;

width: 21%;              //下划线的宽度

height: 3px;             //下划线的高度

background: #0f71bd;

}

20.页面写ul li标签是，去除ul li默认css样式，内外边距，写在css初始位置

ul,li{

padding:;

margin:;

list-style:none

}

css图片文字

20.css样式优先级

css:

<style type="text/css">

.blue {

color: blue;

}

.red {

color: red;

}

</style>

html:

<div class="red blue">这是什么颜色</div>

<div class="blue red">这是什么颜色</div>

两个div都是红色。暂且用就近原则解释，那个class样式离html近，就用那个

21.复选框修改默认背景色以及打钩的颜色

html:

<input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>

css:

.chk_1,.chk_2,.chk_3,.chk_4 {

display: none;

}

/*******STYLE 1*******/

.chk_1 + label {

background-color: #FFF;

border: 1px solid #C1CACA;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);

padding: 9px;

border-radius: 5px;

display: inline-block;

position: relative;

margin-right: 30px;

}

.chk_1 + label:active {

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

.chk_1:checked + label {

background-color: #E3E2E9; //背景色

border: 1px solid #92A1AC;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);

color: #243441;

}

//打钩的颜色

.chk_1:checked + label:after {

content: '\2714';

position: absolute;

top: -26px;

left: 0px;

color: #0C7BE3;

width: 100%;

text-align: center;

font-size: 1.4em;

padding: 1px 0 0 0;

vertical-align: text-top;

}

css图片文字

22.圆圈中带数字

html:

<div class="comment-number">

<span>4</span>

</div>

css:

.comment-number {

position: absolute;

top: 19%;

margin-left: 16px;

/* right: 2%; */

/* left: 10px; */

width: 16px;

height: 18px;

background-color: #42ACFF;

border-radius: 25px;

}

.comment-number span{

width: 16px;

height: 18px;

line-height: 18px;

display: block;

color: #FFF;

font-size: 11px;

text-align: center;

}

css图片文字

23.文本两端对齐，一般是登录信息页面

css：

div { width: 100px; padding: 0 10px; background: pink; margin-bottom: 10px; text-align-last:justify; /* 这是关键属性 */}

html:

<div>账号</div>

<div>密码设置</div>

<div>手机号</div>

秒客网

css图片文字

写页面总结：

1.css图片和文字同一行显示

2.搜素框架搜索图标，还有提示文字

10.css实现一行文字居中，多行文字左对齐

相关文章