前端笔记

css基础

css层叠样式表特点：

继承性

层叠性(可被覆盖)

行内样式表

<body>
    <div style="width: 100px;height: 100px;background: lightblue;">
        <!-- 行内样式表，极差，不允许使用 -->
    </div>
​

命名法

驼峰命名法

xiaoMing小驼峰命名法(推荐)

XiaoMing大驼峰命名法

下划线命名法

例: xiao_ming

xiao-ming

表现与结构分离

表现:css

结构:html

行块属性

块表签

div，ul，li，ol，h1-h6，p

可以设置宽高，不可以与别人共处一行

不设置宽高情况下，默认宽度是100%

行内标签

span，a，strong

不可以设置宽高，可以与别人共处一行

其宽高由内容展开

行内块表签

img，input

可以设置宽高，不可以与别人共处一行 -->

block;block是块，inline是行，display是取消啥啥啥属性，display: inline-block取消行块属性，变成行内块表签

盒模型《盒子修剪溢出》

overflow

默认值。内容不会被修剪，会呈现在元素框之外

overflow: visible;

 

内容会被修剪，并且其余内容不可见

overflow: hidden;

 

内容会被修剪，浏览器会显示滚动条以便查看其余内容

overflow: scroll;

 

由浏览器定夺，如果内容被修剪，就会显示滚动条

overflow: auto;

 

规定从父元素继承overflow属性的值

overflow: inherit;

弹性布局

justify-content: space-between; 
                                    space-between;  均匀排列每个元素首个元素放置于起点，末尾元素放置于终点
                                    space-around;   均匀排列每个元素每个元素周围分配相同的空间
                                    space-evenly;   均匀排列每个元素,每个元素之间的间隔相等
                                    stretch;        均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 */
posted @ 2021-11-07 20:04  roastpork丸子龙  阅读(35)  评论(0)    收藏  举报