CSS

一,盒子模型:

1,border:

          (1  border-width: 5px;

         (2   border-style: solid;实线

dotted :  点线。dashed :  虚线。
solid :  实线边框

          (3  border-color: aqua;

简写:border:5px,solid,pink;不分顺序

 (4,表格细线边框:   border-collapse: collapase

(5,边框会影响盒子实际大小

2,内边距padding:

padding-top/bottom/left/right:

简写:

注意: 

如果 盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

3,外边距margin:

margin-left/right/top/bottom:

margin的简写与padding一样

典型应用:让块级盒子水平居中,但必须满足2个条件: 

(1,盒子必须指定了宽度width

(2,盒子左右的外边距都设置为auto   margin:0 auto;

外边距合并:

(1,

(2, 

3,清除内外边距:

不同浏览器的默认内外边距不同

二,PS基本操作:

三,圆角边框(重点)

四,盒子阴影(重点)

五,文字阴影

六,CSS浮动:

1,传统网页布局

2,为什么需要浮动

3,什么是浮动?

4,浮动特性(重难点!!!)

(1,浮动元素会脱离标准流(脱标)

(2,浮动元素会一行内显示并且元素顶部对齐

    一行内装不下会自动换行

     浮动的元素之间不会有缝隙

(3,浮动元素会具有行内块元素的特性(重难点)

5,浮动元素经常和标准流父级搭配使用

6,浮动的两个注意事项:

7,清除浮动:

(1,为什么需要清除浮动?

(2,清除浮动的本质

(3,语法:

选择器 {clear:属性值;}

属性值:left(不允许左侧有浮动元素,清除左侧浮动的影响),right,both

实际工作中,几乎只用clear:both;

清除浮动的策略是:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

8,清除浮动的方法:

(1,额外标签法即隔墙法,W3C推荐的做法

 

(2,父级添加overflow属性

(3,父级添加after属性

.clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        /* 为 IE6、IE7浏览器设置的清除浮动 */
        *zoom: 1;
    }

(4,父级添加双伪元素

相关推荐

  1. <span style='color:red;'>CSS</span>

    CSS

    2023-12-21 02:26:01      28 阅读
  2. <span style='color:red;'>CSS</span>

    CSS

    2023-12-21 02:26:01      40 阅读
  3. CSS:css简介

    2023-12-21 02:26:01       11 阅读
  4. CSS总结

    2023-12-21 02:26:01       37 阅读
  5. css基础

    2023-12-21 02:26:01       39 阅读
  6. CSS-2

    2023-12-21 02:26:01       34 阅读
  7. CSS-1

    2023-12-21 02:26:01       42 阅读
  8. 打包<span style='color:red;'>CSS</span>

    打包CSS

    2023-12-21 02:26:01      43 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-21 02:26:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-21 02:26:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-21 02:26:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-21 02:26:01       20 阅读

热门阅读

  1. 计算机网络第二章课后习题2-16解析

    2023-12-21 02:26:01       28 阅读
  2. Golang基础教程

    2023-12-21 02:26:01       41 阅读
  3. 黑豹程序员-HTTP返回状态码

    2023-12-21 02:26:01       29 阅读
  4. 【ValueError: RSA key format is not supported】

    2023-12-21 02:26:01       41 阅读
  5. 一文学会 Apache Zeppelin

    2023-12-21 02:26:01       35 阅读
  6. JVM- 为什么G1垃圾回收器需要有大对象区

    2023-12-21 02:26:01       36 阅读
  7. ETL-从1学到100(1/100):ETL涉及到的名词解释

    2023-12-21 02:26:01       34 阅读
  8. TensorFlow 入门:Hello TensorFlow 编程

    2023-12-21 02:26:01       40 阅读