css知识点

1、图片的处理

当一个网页有大量图片要加载时,可以对图片进行压缩,或者采用Js异步处理,让一部分图片先加载,鼠标滑动到该处时在加载该处的图片

2、怎样设置HTML元素是它在浏览器中不可见

(1)给它的宽高设置为0

(2)disply:none

(3)overflow:hidden

(4)visibility:hidden;

3、外边距重叠问题

(1)当两个相邻的盒子的外边距都是正数时,重叠结果为两者之间较大的值

(2)当两个相邻的盒子的外边距都是负数时,重叠结果为两者之间绝对值较大的值

.one{

margin-bottom:-100px;

background:red;

}

.two{

margin-top:40px;

background:blue;

}

蓝色盒子压了红色盒子的一半

(3)当两个相邻的盒子的外边距一正一负时,重叠结果为两者相加的值

外边距重叠

div{

width:200px;

height:200px;

background:red;

}

.one{

margin-bottom:-100px;

}

.two{

margin-top:40px;

background:blue;

}

3、背景

背景设置 background:

1、background-color:背景颜色设置

background:rgb(0-255,0-255,0-255);

三原色设置

2、background-image:url(),url(); 多背景图片设置

多个背景,用,隔开

3、background-repeat:repeat-x|repeat-y|no-repeat 背景平铺设置

4、background-position:x,y; 背景定位设置

background-position:centercenter;   让一张图片在盒子中完全居中显示·

background-position:100%center;  让图片靠右

5、background-size:背景尺寸设置

一般只设置一个width,保留它的比例

background-size:cover; 覆盖页面

background-size:contain;自适应(常和position一起用)

4、页面浮动----float

float:浮动

   (1)浮动后会脱离文档流,往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素 就会停止。

(2)浮动的元素撑不开父级

float:left、right、none

设计之初的作用是用来做文字环绕

p标签 段落 双标签 块级

img标签 图片标签 单标签 比较特殊,行级却可以设计宽高

alt SEO应用--可以用爬虫爬到,搜索中会用到,当图片没加载出来时,Alt文字会显示

float属性对块级元素的影响:

设置浮动之后,块级元素的宽度不再跟随父级宽度,而是内容决定(内容撑开宽度)

.div1{

background:red;

float:left;

}

1111

float元素对行级元素的影响:

可以设置尺寸以及盒模型

.span1{

background:red;

width:200px;

height:200px;

float:left;

}

例:用HTML CSS 实现两列布局,一列宽240,一列跟随浏览器自适应,两列间距10px

div{

height:400px;

}

.one{

width:240px;

background:red;

float:left;

}

.two{

width:240px;

background:red;

float:right;

}

.three{

background:blue;

/*float: left;*/

margin:0px250px;

}


例:用HTML CSS 实现两列布局,一列固定,一列岁浏览器改变大小

.left{

width:240px;

height:400px;

background:red;

float:left;

}

.right{

height:400px;

background:yellow;

margin-left:250px;

}

*浮动的清除

当一个大盒子里有三个盒子且都有float属性时,它们都脱离了文档标准流,这时候大盒子就没有了高度了,这时要清除浮动的影响

.all{

width:600px;

border:4px#000solid;

}

.alldiv{

width:200px;

height:200px;

float:left;

}

.one{

background:red;

}

.two{

background:blue;

}

.three{

background:yellow;

}

一、方法一

給父级盒子设置高度

.all{

height:400px;

width:600px;

border:4px#000solid;

}

二、方法二

再父级盒子中,在浮动的盒子下再放一个一个盒子(这个盒子没有float属性)中设置clear属性,就可清除浮动

(一般不用这种方法去清除浮动,因为会增加页面的标签)

.all{

/*height: 400px;*/

width:600px;

border:4px#000solid;

}

.alldiv{

width:200px;

height:200px;

}

.one{

background:red;

float:left;

}

.two{

background:blue;

float:left;

}

.three{

background:yellow;

float:left;

}

.clear{

clear:both;

}

三、方法三

设置伪元素清除浮动(最常用的清除浮动的方式)

.all{

width:600px;

border:4px#000solid;

}

.alldiv{

width:200px;

height:200px;

}

.one{

background:red;

float:left;

}

.two{

background:blue;

float:left;

}

.three{

background:yellow;

float:left;

}

.clearfix{

/*兼容IE6/7*/

zoom:1;

}

.clearfix::after{

content:"";

display:block;

height:0;

clear:both;

}

四、方法四

使用overflow属性来清除浮动  (一般也不会用这种方法去清除浮动)

.all{

width:600px;

border:4px #000 solid;

overflow:hidden;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!! 博客地址 点击跳转...
    西巴撸阅读 3,526评论 0 0
  • CSS 层叠样式表(表示层) 一、CSS引入方式 1.CSS行内样式 直接使用style属性 style=”wid...
    Lizzy95阅读 2,880评论 0 1
  • #main {max-width:600px; margin: 0 auto;} max-width相对于wid...
    明将阅读 1,007评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,760评论 0 2
  • 要说有什么不适合一个人去的地方,有的人说是快餐厅,买一送一很伤人,去上个厕所回来还发现餐具已经被服务员收走;有的人...
    Mr_Ten阅读 5,522评论 4 16