前端学习笔记(1)---css/tailwind
一、块元素和行内元素
块占一行,可设置尺寸,行内元素在一行,不可设置长宽
-
块元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
等- 独占一行
- width、height、margin、padding均可控制
- 宽度默认是容器(父级宽度)的100%
- 是一个容器即盒子,里面可以放块级元素或行内元素
- 文字类元素中不能使用块级元素
-
行内元素
<span>、<a>、<strong>
等- 相邻行内元素在一行上,一行可显示多个
- width和height直接设置是无效的
- 默认宽度就是他本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接里不能再放链接,可以放块级元素,但是给
<a>
转换一下块级模式最安全
-
行内块元素
<img/>、<input/>、<td>
等- 和相邻行内元素在一行上,但是他们之间会有空白缝隙,一行可显示多个**(行内元素特点)**
- 默认宽度就是他本身内容的宽度**(行内元素特点)**
- width、height、margin、padding均可控制**(块级元素特点)**
-
显示模式转换
-
转换为块级元素--------
display: block
<a class="block">...</a>
-
转换为行内元素--------
display: inline
<div class="inline bg-green-500">...</div>
-
转换为行内块元素--------
display: inline-block
<div class="inline-block bg-green-500">...</div>
-
小技巧:单行文字垂直居中的原理:让文字行高等于盒子的高度,就可以使文字在当前盒子内垂直居中,tailwind中行高使用
leading-{size}
表示<span class="inline-block h-24 leading-24 bg-blue-400">这是一个span转换为行内块元素</span>
二、背景相关
1. 背景颜色
背景颜色直接使用
bg-{color}-{amount}
来实现,背景透明度使用bg-opacity-{amount}
,渐变色使用bg-gradient-{direction}
配合
2. 背景图片
实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于
控制位置
背景图片可通过两种方式插入:①编辑
tailwind.config.js
文件中的theme.backgroundImage
来添加自己的背景图片,使用时直接采用bg-{key}
的形式;②添加style属性style="background-image: url(...)"
直接引入
Tips:页面元素既可以添加背景颜色,也可以添加背景图片,背景颜色位于最底层
-
背景平铺
默认是可重复平铺的,可以通过
bg-repeat\bg-norepeat\bg-repeat-x\bg-repeat-y
来控制 -
背景图片位置
-
使用方位
-
使用原始方式
style="background-position: 参数1 参数2"
参数1位x方位或坐标,参数2为y方向或坐标,可以混合使用,但是必须是x-y的顺序
style="background-position: center 20px"
==>表示水平居中,距离上边界20px
-
-
背景滚动
bg-scroll
:随着对象滚动而滚动bg-fixed
:不随对象滚动,背景固定
三. css三大特性
-
层叠性
长江后浪推前浪,前浪死在沙滩上
-
相同选择器设置了相同的样式就是产生层叠(覆盖)
-
样式冲突,后来居上
-
样式不冲突,合二为一
-
-
继承性
龙生龙,凤生凤,老书生的孩子会打洞
- 子标签会继承父标签中的某些样式,如文本颜色和字号
- 可继承的有(text-,font-,line-这些元素开头的,以及color属性)
- 行高的继承,行高可跟单位可不跟,不跟单位的表示文字元素大小的几倍
-
优先级
-
选择器相同,执行层叠性
-
选择器不同,根据选择器权重执行
选择器 权重 继承或* 0,0,0,0 元素选择器 0,0,0,1 类/伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style="" 1,0,0,0 !important 重要的 无穷大 粒度越小,权重越大,权重会叠加(叠加不会有进位的问题)
-
四、盒子模型
box-border
:包括边框和内边距,增加border和padding不会影响盒子大小
box-content
:不包括边框和内边距,增加border和padding会影响盒子大小
-
边框border
-
内边距padding
box-content
模式下,如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小 -
外边距margin
①设置盒子水平居中的方法:
mx-auto
**这种设置的前提是盒子必须指定了宽度,原理是把左右外边距设置为auto
②行内元素或者行内块元素水平居中的方法是给他的父元素增加
text-align:center
即可tailwind中直接设置
text-center
,其原理是将它们当做文本来内容处理-
外边距合并,使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
-
对于两个嵌套关系的父子块元素,如果父子元素都设置了上边距,此时父元素会塌陷较大的外边距值
解决方案有三
:- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加
overflow:hidden
(一般使用该种方案),tailwind中直接在父级class属性中添加overflow-hidden
-
-
-
清除内外边距
* { padding: 0; margin: 0; }
五、浮动
传统网页布局的三种方式
- 标准流
- 浮动:
float-none/left/right
- 定位
浮动的典型应用:可以让多个块级元素一行内排列显示,如
<div>
精髓:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
1. 浮动特性:
-
浮动元素会脱离标准流
浮动的盒子不再保留原来的位置
-
浮动元素会一行内显示并且元素顶部对齐
-
浮动的元素会具有行内块元素的特性
- 行内元素有了浮动就不用转换块级或行内块就可以直接设置宽高了
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小则有内容来决定
- 浮动的盒子之间是没有缝隙的,紧挨在一起
2. 使用策略
为了约束浮动,网页布局一般用标准流的父级盒子进行上下排列,之后将内部的子元素进行浮动排列
3. 注意事项
- 浮动的盒子只会影响后面的标准流,不会对前面的标准流造成影响
4. 清除浮动
原因:当一个父级盒子中全部子元素都浮动后,父级盒子高度变为0,会造成父级盒子后面的标准流全部上移,影响整体布局
清除浮动本质就是清除浮动带来的影响
策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
-
额外标签法
在最后一个浮动子元素后面加一个空标签(必须是块级元素),class里面加
clear-both
-
父级添加
overflow-hidden
,代码简洁但是不会显示溢出的部分 -
after伪元素
额外标签法升级版(父级元素使用如下样式)
.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } /*IE6\7专有*/ .clearfix{ *zoom: 1; }
-
双伪元素清除浮动
.clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } /*IE6\7专有*/ .clearfix{ *zoom: 1; }
几个常用修饰
- 圆角
rounded-{?t/r/b/l/tl/tr/br/bl}-{?none/sm/md/lg/xl/2xl/3xl}
- 阴影
shadow-{?sm/lg/xl/2xl/inner/none}