其他分享
首页 > 其他分享> > CSS笔记3

CSS笔记3

作者:互联网

目录

一.轮廓阴影圆角

二.浮动

 三.高度塌陷和BFC

1.高度塌陷                                                                                                                

 2.BFC(block formatting context)块级格式化环境

3.clear

 四.定位 

 五.元素的层级


一.轮廓阴影圆角

outline  用来设置元素的轮廓线,用法和border一样,不同点 就是轮廓不会影响到可见框的大小
box-shadow  用来设置元素的阴影,阴影不会影响页面布局             

第一个值  水平偏移值                            

第二个值   垂直偏移值                            

第三个值    阴影的模糊半径越大越模糊                                                     

第四个值   阴影的颜色                                   
border-radius:用来设置圆角 
border-top-left-radius:50px  100px;
第一个值水平半径
第二个值垂直半径

二.浮动

1.作用: 通过浮动可以使一个元素向父元素的左侧或右侧移动 使用 float 属性来设置元素浮动                       可选值      none:默认值 元素不浮动   left:向左  right:向右                                              目前主要作用:让页面中的元素水平排列

2.特点:      (1)浮动元素会完全脱离文档流,不再占据文档流的位置

                    (2)设置浮动以后元素会向父元素的左侧或右侧移动

                    (3)浮动元素默认不会从父元素中移除

                    (4)浮动元素向左或向右移动时,不会超过它前边的其他浮动元素

                    (5)如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移

                    (6)浮动元素不会超过他上边的浮动的兄弟元素,最多和他一样高

 3.其它特点:(1)浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以可以用浮动来设置文字环绕图片

 脱离文档流的特点

          块元素

                            1.块元素不在独占一行

                            2.脱离文档流以后,块元素的宽度和高度默认被内容撑开

          行内元素

                            行内元素脱离文档流会变成块元素,特点和块元素一样

 三.高度塌陷和BFC

1.高度塌陷                                                                                                                

         1)在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动,会脱离文档流,将不法撑开父元素,导致父元素的高度丢失

         2)解决方式

  1.  开启元素的BFC
  2. 使用after伪元素设置clear属性   

    .box::after{ display:block;clear:both; }          

 2.BFC(block formatting context)块级格式化环境

    BFC是一个CSS中的一个隐藏的属性, 开启BFC该元素会变成一个独立的布局区域

  1.  元素开启BFC的特点:

    1.元素不会被浮动元素所覆盖

    2.子元素和父元素外边距不会重叠

    3.可以包含浮动的子元素

  2. 开启浮动元素的BFC方式

    1.设置元素的浮动 缺点 从文档流中脱离

    2.将元素设置为行内块元素  缺点

    3.将元素的overflow设置为一个非visible的值

      -常用方式 为元素设置 overflow:hidden  开启BFC 以使其可以包含浮动的子元素

3.clear

1)当我们不希望某个元素因为其他元素浮动的影响而改变位置

       可以通过clear属性来清除浮动元素对当前元素所产生的影响

2)clear     可选值

                left  清除左侧浮动元素对当前元素的影响

                right 清楚右侧浮动元素对当前元素的影响

                both  清楚两侧中最大影响的那侧

      原理:设置清除浮动以后,浏览器会自动为元素添加一个上外边距, 以使其位置不受其他元素的影响

3)clearfix

 四.定位 

  1. 定义 

    定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面中的任意位置。

    通过position属性来设置定位。

     可选值

    static 默认值 元素是静止的没有开启定位

    relative 开启元素的相对定位

    absolute 开启元素的绝对定位

    fixed  开启元素的固定定位

    sticky 开启元素的粘滞定位

           
  2. 分类   

1.相对定位relative 

特点:1)元素开启相对定位以后,如果不设置偏移量元素不会发生任何的变化

                        偏移量(offset): top bottom left right

           2)  相对定位是参照于在文档流中的位置进行定位的

           3)相对定位会提升元素的层级

          4)相对定位不会脱离文档流

          5)相对定位不会改变元素的性质块还是块,行内还是行内

2.绝对定位absolute

特点  1)开启元素定位后,如果不设置偏移量元素的位置不会发生改变

         2)开启元素定位后,元素会脱离文档流

         3)元素的性质会发生改变,行内会变成块,块的宽度被内容撑开

         4)元素提高一个层级

         5)绝对定位是相对其包含块进行定位的

包含块(containing block)

-正常情况下

 包含块就是离当前元素最近的祖先块元素

-绝对定位的包含块

包含块就是离它最近的开启了定位的祖先块元素,如果祖先块元素都没有开启定位,则根元素就是它的包含块

3.固定定位fixed

固定定位也是一种绝对定位,大部分特点与绝对定位一样。

不同点:固定定位永远参照浏览器的视口进行定位

4.粘滞定位sticky

特点:和相对定位基本相同,不同点 可以在元素到达某个位置将其固定

 五.元素的层级

 

 

标签:浮动,定位,元素,开启,笔记,文档,BFC,CSS
来源: https://blog.csdn.net/m0_66506641/article/details/122756035