前端学习笔记(1)---css/tailwind

1,819 阅读6分钟

前端学习笔记(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>

image-20210619092853396.png


二、背景相关

1. 背景颜色

背景颜色直接使用bg-{color}-{amount}来实现,背景透明度使用bg-opacity-{amount},渐变色使用bg-gradient-{direction}配合

image-20210619100255743.png

2. 背景图片

实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置

背景图片可通过两种方式插入:①编辑tailwind.config.js文件中的theme.backgroundImage来添加自己的背景图片,使用时直接采用bg-{key}的形式;②添加style属性style="background-image: url(...)"直接引入

image-20210619100540520.png

Tips:页面元素既可以添加背景颜色,也可以添加背景图片,背景颜色位于最底层

  • 背景平铺

    默认是可重复平铺的,可以通过bg-repeat\bg-norepeat\bg-repeat-x\bg-repeat-y来控制

  • 背景图片位置

    • 使用方位 image-20210619102643796.png

    • 使用原始方式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会影响盒子大小

image-20210619170036163.png

  • 边框border

  • 内边距padding

    box-content模式下,如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

  • 外边距margin

    ①设置盒子水平居中的方法mx-auto**

    这种设置的前提是盒子必须指定了宽度,原理是把左右外边距设置为auto

    ②行内元素或者行内块元素水平居中的方法是给他的父元素增加text-align:center即可

    tailwind中直接设置text-center,其原理是将它们当做文本来内容处理

    • 外边距合并,使用margin定义块元素的垂直外边距时,可能会出现外边距的合并

      嵌套块元素垂直外边距的塌陷

      • 对于两个嵌套关系的父子块元素,如果父子元素都设置了上边距,此时父元素会塌陷较大的外边距值

        解决方案有三

        1. 为父元素定义上边框
        2. 为父元素定义上内边距
        3. 为父元素添加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}