![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
tinyint_813
这个作者很懒,什么都没留下…
展开
-
前端-脑图
前端学习脑图原创 2022-09-18 21:36:32 · 115 阅读 · 1 评论 -
标准盒子模型和怪异盒子模型(IE盒子模型)
标准盒子模型设置方式:border-sizing: content-box(默认)包含:margin、border、padding、content怪异盒子模型(IE盒子模型)设置方式:border-sizing: border-box包含:margin、border、padding、content区别标准盒子的总宽度为: margin+border+padding+content= margin+border+padding+width怪异盒子的总宽度为:margin+border+pad原创 2021-09-01 11:38:22 · 259 阅读 · 0 评论 -
三个元素平均分配宽度
采用flex布局把三个子元素都写上 flex:1就会平分原创 2021-09-01 10:48:50 · 420 阅读 · 0 评论 -
box-sizing
含义由于给一个盒子增加padding和border之后,盒子会变大。若将box-sizing设置为border-box,可以让盒子元素的宽高不变。原理原理:减去了内容的宽高原创 2021-06-19 20:39:49 · 57 阅读 · 0 评论 -
CSS画圆
设置宽高、背景颜色border-radius:50%(添加圆角的边框)原创 2021-06-19 20:38:42 · 233 阅读 · 0 评论 -
CSS中的BFC
含义BFC是一个独立的布局环境,其中的元素环境不受外界影响。方法position为absolute、fixed设置浮动float设置overflow(不为visible)display为inline-block、flex原创 2021-06-19 20:37:54 · 50 阅读 · 0 评论 -
z-index
作用控制定位流的覆盖关系,默认为0。谁的z-index值大,谁就在上面从父现象如果两个元素都没有设置父元素的z-index值,那么谁大就在上面;如果两个元素都设置了父元素的z-index值,那么子元素的z-index就失效,只看谁的父元素大,谁就在上面...原创 2021-06-19 20:36:25 · 62 阅读 · 0 评论 -
CSS画三角形
.test{ /*width: 200px;*/ /*height: 200px;*/ width: 0; height: 0; /* border-top border-left border-bottom border-right变成了四个三角形 共同拼接为正方形*/ /* transparent:透明的,让边框变透明 让其它的变透明就可得到一个三角形*/原创 2021-05-12 21:22:35 · 51 阅读 · 0 评论 -
span
span是行内元素,不能设置宽高。margin padding左右有效,上下无效。<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } span{原创 2021-05-08 10:26:51 · 159 阅读 · 2 评论 -
使用flex进行圣杯布局
<style> *{ margin: 0; padding: 0; } body{ display: flex; flex-direction: column; } /* 这里要设置 不然不能伸长占据父元素大小 */ body,html{ height: 100%; .原创 2021-04-23 16:50:22 · 106 阅读 · 0 评论 -
span是什么元素?可以设置宽高吗?可以设置marigin/padding吗?
span是行内元素,不能设置宽高。margin-left和margin-right有效,margin-top和margin-bottom无效。padding-left和padding-right有效,padding-top和padding-bottom无效。(margin padding 左右有效,上下无效)(注意:img的margin、padding是有效的)...原创 2021-04-23 11:12:36 · 357 阅读 · 0 评论