zoukankan      html  css  js  c++  java
  • css的学习笔记

    tailwindcss

    1.CSS float 属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

    2.

    Relative 定位

    相对定位元素的定位是相对其正常位置。

    3.

    Absolute 定位

    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

    Absolutely定位使元素的位置与文档流无关,因此不占据空间。

    Absolutely定位的元素和其他元素重叠

    4.

    盒子模型

    重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.

    适用于display属性为块状的元素,例如block,inline-block

    例如

    <style>

      div{

        200px;

        height:200px;

    }

    </style>

    <div></div>

    当div的宽高设定为200px的时候,其实设定的是content内容块的大小的设定,当给该div设置padding或border边框的时候,content内容区域的大小不变,整个div会在视觉上感觉变大了,是因为整个盒子的大小应该是margin+bprder+padding+content组成的

    ,但是我们设置的狂高只适用于content,当设定其他大小时,在content大小保持不变的情况下,自然会把盒子撑大。

    若想保持盒子大小不变的情况下,则可以设置box-sizing=border-box;这样设置的大小相当于就是整个盒子的大小,那么在添加padding属性的时候,会压缩盒子内部的元素大小

    5.

    flex布局时容器问题

    flex是css3中新增的布局方式,叫做弹性盒子,设置方法 :display:flex

    当设置flex-wrap:warp时,flex容器就变成了多行容器,否则默认为单行容器,当变成多行容器时,容器会自动拆分容器的大小为多份,当你在该容器中添加多个块状元素,自动换行的时候,会在多个div之间留有空白

    要想去除空白,可以使用align-content:flex-start进行空白去除,其实相当于顶端对齐。

    align-content与align-items的区别:

    align-content:适用于多行容器,当容器时多行的时候,可以设置容器内的div在纵轴的布局方式

    align-items:适用于单行容器,当容器为单行的时候,可以设置容器内的div的布局方式

     

  • 相关阅读:
    【剑指Offer】跳台阶&变态跳台阶
    【剑指Offer】替换空格
    【剑指Offer】二维数组中的查找
    【Leetcode】2. Add Two Numbers 两数相加
    HTML学习笔记(一)HTML的一些概念区别
    C#项目中一些文件类型说明
    数据结构初步归纳(一)概念、线性表以及队列和栈
    线程相关概念
    程序开发方法论
    C#集合类型
  • 原文地址:https://www.cnblogs.com/zst-blogs/p/12249368.html
Copyright © 2011-2022 走看看