CSS
关注
分享
扫一扫
tinyint_813
这个作者很懒，什么都没留下…
展开
-
前端-脑图
前端学习脑图原创 2022-09-18 21:36:32 · 146 阅读 · 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 · 303 阅读 · 0 评论 -
三个元素平均分配宽度
采用flex布局把三个子元素都写上 flex:1就会平分原创 2021-09-01 10:48:50 · 519 阅读 · 0 评论 -
box-sizing
含义由于给一个盒子增加padding和border之后，盒子会变大。若将box-sizing设置为border-box，可以让盒子元素的宽高不变。原理原理：减去了内容的宽高原创 2021-06-19 20:39:49 · 77 阅读 · 0 评论 -
CSS画圆
设置宽高、背景颜色border-radius：50%（添加圆角的边框）原创 2021-06-19 20:38:42 · 278 阅读 · 0 评论 -
CSS中的BFC
含义BFC是一个独立的布局环境，其中的元素环境不受外界影响。方法position为absolute、fixed设置浮动float设置overflow（不为visible）display为inline-block、flex原创 2021-06-19 20:37:54 · 69 阅读 · 0 评论 -
z-index
作用控制定位流的覆盖关系，默认为0。谁的z-index值大，谁就在上面从父现象如果两个元素都没有设置父元素的z-index值，那么谁大就在上面；如果两个元素都设置了父元素的z-index值，那么子元素的z-index就失效，只看谁的父元素大，谁就在上面...原创 2021-06-19 20:36:25 · 87 阅读 · 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 · 63 阅读 · 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 · 179 阅读 · 2 评论 -
使用flex进行圣杯布局
<style> *{ margin: 0; padding: 0; } body{ display: flex; flex-direction: column; } /* 这里要设置 不然不能伸长占据父元素大小 */ body,html{ height: 100%; .原创 2021-04-23 16:50:22 · 129 阅读 · 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 · 418 阅读 · 0 评论