前端笔记（7）css属性书写顺序，布局流程，chrome调试工具

今天药忘吃喽~ 2022-11-12 04:23 99阅读 0赞

### css样式表/层叠样式表（5） ###

*  css属性书写顺序
 *  布局流程
 *  chrome调试工具

# css属性书写顺序 #

**布局定位属性**  
`display` / `position` / `float` / `clear` / `visibility` / `overflow`  
（建议 `display` 第一个写，毕竟关系到模式）

**自身属性**  
`width` / `height` / `margin` / `padding` / `border` / `background`

**文本属性**  
`color` / `font` / `text-decoration` / `text-align` / `vertical-align` / `white- space` / `break-word`

**其他属性（CSS3）**  
`content` / `cursor` / `border-radius` / `box-shadow` / `text-shadow` / `background:linear-gradient` …

.jdc { 
        display: block;
        position: relative;
        float: left;
    
        width: 100px;
        height: 100px;
        margin: 0 10px;
        padding: 20px 0;
    
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #333;
        background: rgba(0,0,0,.5);
    
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }

# 布局流程 #

（1）必须确定页面的版心（可视区）， 我们测量可得知  
（2）分析页面中的行模块，以及每个行模块中的列模块；其实页面布局，就是一行行罗列而成  
（3）制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要  
（4）然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

# chrome调试工具 #

F12 或者 ctrl\+shift\+I

**Chrome提示的常见布局错误**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221022/4b6b79a01d0d442bad0f6bb97f66a1e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: /images/20221022/fd1c7b6216414cff8df872e87fdc5176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]: /images/20221022/385bda313d9b4c60a9075c89d92bf72c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]: /images/20221022/c5560e66fa4b4dde8e478628c4811618.png