css从0到1

蔚落 2022-11-15 11:40 260阅读 0赞

### 文章目录 ###

*  学习地址
 *  css组成部分
 *  css优先级如下：
 *  css背景图片
 *  文本
 *  链接
 *  列表
 *  display块和内联元素
 *  弹性盒子
 *  元素位置摆放&&对齐
 *  导航栏目布局实战
 *  个人实战反思
 *   *  inline-block 水平显示生效了问题
     *  清除浮动

# 学习地址 #

[菜鸟教程][Link 1]  
[操作实验室][Link 2]

# css组成部分 #

![在这里插入图片描述][20210331185226365.png]  
样式具有继承和优先级的特点

# css优先级如下： #

> !import>内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

> 伪类选择器:比如《div 《p》《p》》  
> div:first-child\{ font-size:30px \}  
> 这里first-child就是伪类，它其实代表的是p标签

> 在scss模板语法里面 /deep/ 优先级最高，别的css里面/deep/是错误语法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]

# css背景图片 #

![在这里插入图片描述][20210331190812688.png]

# 文本 #

text-align 文本居中  
font-size:2.5em; 字体大小

# 链接 #

a:link \{color:\#000000;background-color:\#B2FF99;\} /\* 未访问链接\*/  
a:visited \{color:\#00FF00;\} /\* 已访问链接 */  
a:hover \{color:\#FF00FF;\} /* 鼠标移动到链接上 */  
a:active \{color:\#0000FF;\} /* 鼠标点击时 \*/

# 列表 #

display

# display块和内联元素 #

CSS Display - 块和内联元素  
块元素是一个元素，占用了全部宽度，在前后都是换行符。  
块元素的例子：  
< h1>  
< p>  
< div>

block：宽度追随元素的宽度，不会100%宽

**内联元素只需要必要的宽度，不强制换行**。

内联元素的例子：  
< span>  
< a>

**块级元素(block)特性：**

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;  
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

**内联元素(inline)特性：**

和相邻的内联元素在同一行;  
`宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变`，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var  
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script  
CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block – 显示为块级元素  
display:inline – 显示为内联元素  
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性  
我们常将所有< li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

# 弹性盒子 #

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]

.flex-container { 
        display: flex;
        flex-direction: row|column;
        /** 对齐内容 */
        justify-content: flex-start | flex-end | center | space-between | space-around  
    }

# 元素位置摆放&&对齐 #

https://www.runoob.com/css/css-align.html

# 导航栏目布局实战 #

https://www.runoob.com/css/css-navbar.html

# 个人实战反思 #

## inline-block 水平显示生效了问题 ##

inline-block 水平显示生效了，只是我div宽度设置过大，导致一行装不下自然换行啦

![在这里插入图片描述][20210331204513188.png]

## 清除浮动 ##

为何要清除浮动，啥叫浮动

> 当容器的高度为auto，且容器的内容中有浮动（float为left或right,inline-block）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。【div默认高度是自适应内部元素的最大高度，但是如果内部元素采用了float，或者inline-block浮动布局，则父div无法再自适应高度，其高度变为0，就会导致后面的元素换行，或者margin-top失效】

解决办法如下：（[参考文章][Link 3]）

<div style="clear:both;" class="clearfix"></div>   
    不建议使用clear:both,建议使用：after伪元素来清除浮动，
    【:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动】

.clearfix:after{ 
      content: "020"; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
      }
    
    .clearfix { 
      /* 触发 hasLayout */ 
      zoom: 1; 
      }

[Link 1]: https://www.runoob.com/css/css-boxmodel.html
[Link 2]: https://www.runoob.com/try/try.php?filename=trycss3_flexbox_flexline
[20210331185226365.png]: /images/20221022/8c38d98cfb284d93811ac8cd1310c448.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]: /images/20221022/898b69bb726e4452a31ae94df30d025c.png
[20210331190812688.png]: https://img-blog.csdnimg.cn/20210331190812688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210331195341533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[20210331204513188.png]: https://img-blog.csdnimg.cn/20210331204513188.png
[Link 3]: https://zhuanlan.zhihu.com/p/94697222