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;

相关推荐
薛定谔的猫-菜鸟程序员8 分钟前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron
最强小杰29 分钟前
DeepSeek V4 Flash + Codex CLI 接入教程:原生 Responses API 适配,从配置到跑通收藏这篇就够了(2026)
java·前端·python·ai
静水leo1 小时前
使用 Whistle 拦截接口并模拟后端响应
前端
掘金者阿豪1 小时前
SQL Server数据迁移完成后,凌晨的数据库告警该怎么查?
前端·后端
JudithHuang1 小时前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
htzyl2061 小时前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
赵谨言1 小时前
多语种在线语言学习平台LinguaVerse的设计与实现毕业论文
学习
東隅已逝,桑榆非晚2 小时前
算法3.双指针法-快乐数
c++·笔记·学习·算法
li星野2 小时前
Regular and Irregular Nouns — One-Page A4 Notes
学习