css 知识点

一、      选择器：

p:first-letter{  /*伪元素*/

  font-size: 50px  

}

 

div:first-line{

background-color:red;

}

 

input:checked{  /*伪类选择器*/

  width: 200px;

  height: 200px;

}

 

input:disabled{

background-color:red;

}

 

样式优先级：行内 > id> class

 

字体样式：

 

p{

font-family:楷体;

font-stretch:extra-condensed;

font-style:italic;

color:#ffff00;

font-size:50px;

font-weight:bold;

}

 

i{

font-style:normal;

}

 

背景设置

#box {

/*    background-color:pink;*/

background-image:url(../image/1.jpg);

background-repeat:no-repeat;

background-position:right top;

background-attachment:fixed;

width:1024px;

}

 

画三角形：

#demo1{

width:0px;

height:0px;

border:200px solid;

border-left-color:white;

border-right-color:white;

border-top-color:white;

border-bottom-color:yellow;

}

 

 

画奥运五环标志

要求：居于页面正中显示

<divclass="plat">

       <divclass="circle1"></div>

       <divclass="circle2"></div>

       <divclass="circle3"></div>

       <divclass="circle4"></div>

       <divclass="circle5"></div>

  </div>

 

 Css样式：

*{

margin:0px;

padding:0px;

}

 

.plat{

position:absolute;

width:380px;

height:190px;

top:50%;

left:50%;

margin-left:-190px;

margin-top:-95px;

}

 

.circle1,

.circle2,

.circle3,

.circle3,

.circle4,

.circle5{

position:absolute;

width:100px;

height:100px;

border-radius:50%;

border:10pxsolid black;

}

 

.circle1{

border-color:red;

left:0px;

top:0px;

}

.circle2{

border-color:green;

left:130px;

top:0px;

z-index:3; 

}

.circle3{

border-color:blue;

left:260px;

top:0px;

}

.circle4{

border-color:yellow;

left:65px;

   top: 70px;

}

.circle5{

border-color:purple;

left:195px;

top:70px;

}

 

 

两栏布局：

<divclass="right"></div>

  <divclass="left"></div>

 

Css样式：

*{

margin:0px;

padding:0px;

}

 

.right{

position:absolute;

right:0px;

width:100px;

height:100px;

background-color:pink;

opacity:0.5;

}

.left{

height:100px;

background-color:black;

margin-right:100px;

}

 

经典bug：margin塌陷问题

<divclass="box">

       <divclass="content"></div>

  </div>

 

Css样式：

.box{

margin-top:100px;

margin-left:100px;

height:100px;

width:100px;

background-color:black;

/*    overflow:hidden;*/

/* display: inline-block;*/

/* position: absolute;*/      触发bfc，解决塌陷问题

   float: left;

}

.content{

margin-top:50px;

margin-left:50px;

height:50px;

width:50px;

background-color:green;

}

 

 

Float:

所有设置了float的元素都会产生浮动流，块级元素看不到它们，触发了bfc的元素、文本元素及文本可以看到。

清除浮动流：

1）添加元素：如<p class="p"></p>，并设置：.p{

clear:both; /*清除浮动流*/

}

<div class="plat">

       <divclass="content"></div>

       <divclass="content"></div>

       <divclass="content"></div>

       <divclass="content"></div>

       <divclass="content"></div>

<pclass="p"></p>

  </div>

这种方式改变原html内容，不推荐使用

2）设置父元素的伪元素选择器：

/*伪元素选择器*/

.plat:after{

content:"";

display:block;

   clear: both;   /*清除浮动流，三行代码都不能少*/

}

 

另外可以将父元素的属性触发bfc也可清除

 

设置文字环绕图片：

   <img src="image/1.jpg" alt="这是图片" class="img1"> 为祖国守岁，为和平出征。深冬，清晨的南海某军用码头一派忙碌景象：

.img1{

   float: left;

width:200px;

margin-right:10px;

}

 

 

制作，并清除浮动流

<ulclass="u">

       <liclass="l">

             <ahref="#">天猫</a>

       </li>

       <liclass="l">

             <ahref="#">聚划算</a>

       </li>

       <liclass="l">

             <ahref="#">天猫超市</a>

       </li>

  </ul>

 

Css样式：

*{

margin:0px;

padding:0px;

}

 

.u{

list-style:none;

}

.u:after{

content:"";

display:block;

clear:both;

}

.u .l{

float:left;

line-height:30px;

margin:0px10px;

}

a{

text-decoration:none;

}

a:hover{

background-color:#f33;

border-radius:20%;

}

 

 

 

两种文本溢出，单行文本、多行文本溢出，多行文本难以实现，采取估计长度，手动打点。

1）单行文本

溢出容器，打点展示

.box{

display:inline-block;

line-height:30px;

height:30px;

width:500px;

 

overflow:hidden;

   white-space: nowrap;

   text-overflow:ellipsis;

}

 

背景图片处理：当css样式未正常加载时，需要显示原生内容；当正常加载时，需要隐藏原生内容：

<a href="www.baidu.com">www.baidu.com</a>

Css样式：

/*

方式一

a{

border:1px solid red;

display:inline-block;

height:200px;

width:200px;

background-image:url(../image/1.jpg);

background-size:200px 200px;

 

   text-indent:200px; 

white-space:nowrap;

overflow:hidden;

}*/

 

/*方式二

通过padding-top=容器高度 从而撑起图片，将文本内容挤出容器，隐藏即可*/

a{

border:1px solid red;

display:inline-block;

 

height:0px;

padding-top:200px;

overflow:hidden;

 

width:200px;

background-image:url(../image/1.jpg);

background-size:200px 200px;

}

 

设置布局 

*{

margin:0px;

padding:0px;

}

 

div{

width:300px;

height:30px;

background-color:#3D9;

/*    font-size:20px; 居中方式一 */

line-height:30px;

font-size:30px;

color:#fff;

padding:10px0px;

}

 

div:before{

content:"";

height:20px;

width:40px;

display:inline-block;

background-image:url(https://www.baidu.com/img/bd_logo1.png);

background-size:100% 100%;

margin-right:10px;

}

 

div::after{

content:"";

height:20px;

width:20px;

display:inline-block;

background-image:url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/zhidao.png?v=md5);

background-size:100% 100%;

float:right;

   margin-right: 20px;

}

 

阿里笔试题：

Html:

<divclass="wrapper">

       <imgsrc="image/2.jpg" alt="这是图片">

       <pclass="content1">

             {最多两行 20px #333 ,顶部对齐图片，底部间距8px}

       </p>

       <pclass="content2">

             {12px#666 行高1.2 使用语义化的html标签完成以下布局，考虑模块化和扩展性。容器默认宽度320px。图片100*100,hover时，容器宽度变成400px;}

       </p>

  </div>

 

Css样式：

*{

margin:0px;

padding:0px;

}

 

.wrapper{

width:320px;

}

.wrapper img{

width:100px;

height:100px;

float:left;

}

.wrapper:hover{

width:400px;

}

.wrapper .content1{

  line-height: 20px;

  height: 40px;

  font-size: 20px;

  color: #333;

  overflow: hidden;

  margin-bottom: 8px;

}

.wrapper .content2{

color:#666;

font-size:12px;

line-height:1.2em;

}