JavaEE

【前端】CSS(1) —— CSS的基本语法和一些简单的选择器

【前端】CSS(2) —— CSS的基本属性

目录

• 元素的显示模式
• CSS 中的盒模型
• • border
  • padding
  • margin
• 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 属性, 都是针对元素自己的. 弹性布局, 则是用来描述元素之间的关系的(相对位置关系)

hellohellohello

此时我们发现 “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