文档流
- 文档流就是文档内元素
流动
方向
流动方向
内联元素从左往右流
,宽度不够,之字形,且元素会被截断块元素从上往下流动
,一排一排
注意事项
- 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断
- 若想打断上述联结,请使用css属性
/*想打断的内联元素*/{ word-break: break-all; display: inline-block; }
脱离文档流
- 类似悬浮在页面上一样
- position: fixed;
- position: absolute;
关于字体
- 一般,页面默认字体大小16px
- 字体一般都分为
上部
、中部
、下部
文字(汉字、西文)都相对基线(下部)对齐 - 不同字体有自己规定的建议行高,可以自行
line-height
规定
CSS常用命令
字体相关
- 设定字体样式
/*各类选择器*/{ font-family: kai; }
- 字体加粗
/*各类选择器*/{ font-weight: bold; }
- 字体大写
/*各类选择器*/{ text-transform: uppercase; }
背景相关
- 背景位置与自适应
/*各类选择器*/{ background-position: center center;/*水平方向*/ /*垂直方向*/ background-size: cover;/*背景自适应*/ background: url(背景图片地址); }
设定内外边距padding
margin
/*各类选择器*/{
padding: 10px 20px 30px 40px;/*上 右 下 左*/
margin: 10px 20px 30px 40px;/*上 右 下 左*/
}
/*各类选择器*/{
padding: 10px 30px;/*上 右 下 左*/
margin: 10px 30px;/*上下 左右*/
}
margin
甚至可以调成负值,往反方向移呗- 内联元素
左右 padding
有用,上下 padding
不影响页面布局,位置不变。可以设置css:display: line-block;
,使上下左右padding都生效。
position
定位
(详细请阅读:https://developer.mozilla.org...)(??????)??
/*各类选择器*/{
position: relative/absolute/fixed/sticky/static;
}
fixed 元素的宽度会自动缩成最小、最紧凑的宽度
可以使用 width height 调整大小
可以使用 top left right bottom 调整位置
可以使用 left: 0; right: 0; 来使元素充满<body>
absolute 可以设置子元素 position: absolute;
父元素position: elative;
子元素相对父元素绝对定位
子元素居中
- 水平居中
/*想要子元素居中的元素*/{ text-align: center; }
- 垂直居中
/*使用vertical-align要求父元素必须有行高,如果没有的话,一定要手动添加:line-height: ;*/ /*想要居中的子元素*/{ verticle-align: center; }
- 使内联元素在页面中居中:用一个块元素包着它,然后加上css:
<div> <span></span> </div> div{ text-align: center; }
- 设置子元素高度
height: 100%;
,在父元素上加上上下等量的 padding
<div> <span></span> </div> div{ padding: 10px; } span{ height: 100%; }
- 使用flex布局:左右居中,垂直居中。在父元素上加上如下 css:
/*某父元素*/{ display:flex; align-items:center; justify-content:center; }
边框
- 边框圆角
/*想要圆角边框的元素*/{ border: 1px solid red; //设置元素边框 border-radius: 30px; //设置边框圆角30px }
图标
- 可以登录网站:http://www.iconfont.cn/,添加网站生成的
<svg>
到 html 里 - 给
<svg>
添加 css属性改变样式svg{ width: height: fill: /*颜色*/ margin: padding: }
其它
- 鼠标悬停
/*各类选择器*/:hover{ color: red; }
- 继承父辈属性
并不是所有属性都能继承的
/*各类选择器*/{ color: inherit; }
css碎碎念
<a>
标签去掉列表下划线a{ text-decoration: none; }
- 内联元素不能制定高度(
height
)和宽度(width
)
要转变为块级元素(display: block;
)或内联块级元素(display: inline-block;
) - 自己写的属性优先级比浏览器和默认的高
- 行高
line-height
可决定内联元素高度 - html编程中两行代码中间的
空格
和回车
都会变成一个空格
- 同样颜色不同字体上有不同颜色
- 设置上下 padding 一样就是居中,仅对块元素生效,内联元素无效
- 行高
line-height
和字高font-size
的差值会自动的填充在字体的上下 - border 与 浮动
动画操作(如 :hover)border后,元素会左右浮动, 这是由于一开始没有 border,操作后多出来了, 将元素一开始就添加【透明 border】,坑先站好啊,之后动画 border 颜色的显现
- 内联元素盒模型超过父辈
一些默认 display: inline; 的元素被包起来的时候,它的 padding 和margin 有时会超过父辈 需要设定 display: block; 解决 /*内联元素*/{ display: block; }
- div 高度由其内部文档流元素的高度总和决定
内联的高度任性,强行准确测量意义不大 - 设定元素的宽高
weight 锁定宽度,浏览器窗口变小,用滚动条的方式 max-weight 设定最大宽度,浏览器窗口变小,自适应窗口,推荐 当设定了宽度或是最大宽度,使用 margin-left:auto; margin-right:auto; 使元素居中
- 内联元素不接受设定宽高,设定
display: inline-block;
不过支持padding
、margin
,可以用来代替 - 为防止在不同电脑上效果不一致,可以在
css
里再表示下元素的大小,用来确认
原文地址:https://www.cnblogs.com/homehtml/p/11965515.html
时间: 2024-10-10 11:19:25