1

CSS中知 - 沈妙

 1 year ago
source link: https://www.cnblogs.com/liu88/p/17056297.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS中知

1CSS特性

   1.3优先级

     

3075215-20230116131327958-1643040790.png

   1.4权重叠加计算

       

3075215-20230116135754596-1122846367.png

2Chrome调试工具

    2.1查错流程

       

3075215-20230116191723512-880284196.png

3CSS盒子模型

   

3075215-20230116201022316-560482110.png

   3.1内容的宽度和高度

       

3075215-20230117103050949-1911296126.png

   3.2边框（border）-连写形式

       3075215-20230117104458348-1483125569.png

      solid---实线        dashed---虚线         dotted---点线

   3.3边框（border）-单方向设置

       3075215-20230117110408581-2130890442.png

   3.4边框（border）-单个属性

       

3075215-20230117110952872-1523488573.png

   3.5新浪导航案例

       

3075215-20230117130159826-85832783.png

       从外到内：先宽高背景色，放内容，调节内容的位置，控制文字细节

   3.6盒子模型：自动内减 

       

3075215-20230117142905809-537627164.png

   3.7清除默认内外边框

     

3075215-20230117144605733-1588391332.png

         3075215-20230117152305403-1746423368.png

   3.8外边距折叠现象 - note1：合并现象

       
3075215-20230117160514346-744647440.png
   3.9外边距折叠现象 - note2：塌陷现象
       
3075215-20230117161039329-1938709704.png
       行内元素内外边框问题：margin和padding只可改变水平方向距离，不能改变垂直方向距离
                                            若想改变垂直方向的距离要用line-height
4CSS结构伪类选择器
   
3075215-20230117163012004-1866767743.png
          3075215-20230117164203737-981514005.png
5CSS伪元素
   
3075215-20230117165522850-25422788.png
6CSS浮动
    1.前期：图文环绕
    2.后期：网页布局（块级元素在一行排列）
   6.1浮动的特点
     
3075215-20230117194500982-575520992.png
           3075215-20230117194634695-2091602978.png
7CSS书写顺序（浏览器执行效率更高）
    1.浮动/display
    2.盒子模型：margin  border  padding 宽度高度背景色
    3.文字样式

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK