web前端学习日记——DAY03(盒子模型,flex布局,表格)

今天继续学习CSS样式表中的内容学习内容如下:

1.盒子模型:

一个盒子是由外边距、边框、内边距、内容组成的:

分别对应margin、border、padding、content;

我们之前设置的width和height都是指的内容的宽和高;

2.设置边框宽度:

border-width/border-top-width/border-bottom-width/border-left-width/border-right-width

3.设置边框颜色:

border-color/border-方向-color;

4.边框样式:

border-style

solid实线,dotted小圆点,dashed虚线,double双实线,hidden隐藏;

5.外边距:

margin

margin-left/top...设置外边距

设置居中对其:margin:0 auto;

6.内边距:

padding

设置内边距:padding top/bottom/left...

7.元素分类:

行级元素,块级元素,内联块元素;

行级元素inline:默认在同一行显示;

后面可以继续跟同类型标签;

宽度是内容撑开的;

不支持用户设置宽度和高度;

不支持上下外边距、支持左右外边距;

块级元素block:默认独占一行;

支持所有CSS样式的指令;

如果没有设置宽度,默认占满一行;

如果没有设置高度,高度由内容撑开;

内联块元素inline-block:

默认在同一行显示;

支持所有CSS样式的指令

8.可以使用display实现元素类型转换;

9.Flex布局:

flex-direction:控制flex item的排列方向:

row:水平排列,起点在左侧;

row-reverse:水平排列,起点在右侧;

column:主轴为垂直方向,起点在上沿;

column:垂直排列,起点在下沿;

flex-wrap:控制flex item换不换行:

nowrap:不换行挤下来;

wrap:换行;

wrap--reverse:换行,第一行在最下面;

justify-content:定义元素在主轴上的对齐方式;

flex-start:从左侧位置对齐;

flex-end:从右侧位置对其;

center:居中对齐;

space-between:两端对齐,项目之间距离相等;

space-around:每个项目两侧间隔相等;

10.边框圆角:

border-radius

11.表格:

基本标签:

<table>:表格最外层的定义;

<tr>:定义表格的行;

<td>:定义表格的列;

<th>:定义表头;

<caption>:定义表名;

thead,tbody,tfoot没有实际意义,起到可读性的作用,标明哪里是表头哪里是表尾;

边框塌陷:border-collapse

表格合并:跨占列 colspan;

跨占行 rowspan;

相关推荐
Setsuna_F_Seiei9 小时前
前端转型 Agent 开发 06 之 Agent Memory 记忆系统(让 Agent 更智能,更懂你)
前端·agent·ai编程
zhangzeyuaaa9 小时前
Ruby 多线程、GVL(GIL)与 Mutex 完全指南
开发语言·前端·ruby
默_笙10 小时前
🌊 向量库和 ES 都查不出"关系",我只好给奶茶建了一张人脉网
前端·javascript
优选资讯10 小时前
标签打印软件怎么对接 Excel 数据
前端·excel
李日华大战鸡红10 小时前
FOC状态空间方程模型推导(学习记录)
python·学习·线性代数
一个风轻云淡11 小时前
GCC 和 GDB命令简单解读
java·linux·前端
u01110267512 小时前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
kkkkkkkkkk_Z12 小时前
新手自学嵌入式 | 学习日记:异常与中断基础、i.MX6ULL裸机开发环境搭建、GPIO模块与点灯原理
学习
福兮说12 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa12 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端