|
|
【前端】CSS(1) —— CSS的基本语法和一些简单的选择器
元素的显示模式
- 独占一行的: 块级元素 (div, h1-h6, 怕, table, tr …)
- 不独占一行的: 行内元素 (span, a, u, b, stong …)
可以使用 display 属性针对行内/ 块级元素相互转换
(绝大多数都是把行内元素转换为块级元素, 几乎不会把块级元素转成行内元素)
display: inline;
display: block;
display 还有个用途, 让元素隐藏
display: none;
CSS 中的盒模型
页面上的 html 元素都是一个一个的矩形, 每个矩形就可以视为是一个 "盒子"吗盒子里面就可以装东西 (文字, 链接, 图片, 表格…其他任意元素)
每个盒子, 除了内容之外, 还有一些其他的部分.
- 内容: content (最中间的)
- 内边距: padding
- 边框: border
- 外边框: margin
# 注意 # html 中的每个元素都是按照上述这样的规则来进行展开的.
在 CSS 中就可以通过一些属性来设置这里和盒子模型相关的
border
通过 border 给元素设置边框
border: 边框宽度 边框颜色 线条样式;
我们需要加上一个特殊的属性. 设置的这个属性会保证尺寸不变, 如果再有边框就不会把整个占地面积给撑大.
box-sizing: border-box;
# 注意事项 #
支持简写, 没有顺序要求
可以改四个方向的任意边框.
border-top/bottom/left/right:
padding
padding 设置内边距, 边框和内容之间的距离.
padding: 20px;
# 当我们直接写 padding 的时候, 默认四个方向都有, 是复合写法.
# 可以给四个方向都加上边距
- padding-top 上方
- padding-bottom 下方
- padding-left 左侧
- padding-right 右侧
# 其他写法
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
margin
控制的是元素之间的距离, 使用方法和 padding 非常相似.
margin:
margin-top:
margin-bottom:
margin-left:
margin-right:
CSS 的弹性布局
前面介绍的 CSS 属性, 都是针对元素自己的. 弹性布局, 则是用来描述元素之间的关系的(相对位置关系)
<body>
<style>
div {
width: 100%;
height: 100px;
background-color: aquamarine;
}
span {
width: 150px;
font-size: 50px;
background-color:rgb(92, 73, 233);
}
</style>
<div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</div>
</body>
此时我们发现 “width: 150px” 未生效. 对于行内元素, 宽度/ 高度以及外边距, 都是不生效的.
要想生效, 需要转成块级元素.
span {
width: 150px;
font-size: 50px;
background-color:rgb(92, 73, 233);
display: block;
}
当把 span 设成块级元素之后, 虽然宽度生效了, 但是这三个元素就独占一行了.
如果我们想让这几个元素能够水平方向排列开 (不独占一行), 这就是弹性布局要解决的问题.
display: flex;
把当前元素, 设置成 “弹性布局” 的容器. 里面的子元素就会按照弹性布局的规则来排列了.(只是针对子元素生效, 不影响孙子元素)
div {
width: 100%;
height: 100px;
background-color: aquamarine;
display: flex;
}
此时, div 就是弹性布局的容器, 里面的子元素 (三个 span) 就按照弹性布局的规则来进行排列了, 这几个元素是水平方向排列开了, 高度也和父元素一样高了(也可以手动的指定高度), 水平方向默认是靠左对齐.
由于块级元素, 本身就是垂直方向排列的
实际进行网页布局的时候, 就是一行一行的往下布局, 每一行里, 如果有多个元素并列, 使用弹性布局进行处理.
在弹性布局的父容器这里, 可以使用 justify-content 属性来设置水平方向的排列方式
justify-content: center | flex-end | flex-start | space-around | space-between;
垂直方向, 使用 align-items 进行排列
align-items: flex-start| flex-end| center;
align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
|
|
