CSS浮动布局和盒模型

CSS浮动布局&盒模型

1、浮动：float,是块级标签不独占一行，让块级标签的元素可以在同一排

left：向左浮动 right:向右浮动 none:默认值，元素不浮动显示在文本出现的位置 inherit:规定应该从父元素继承float的属性；

.box1{
    background-color: dodgerblue;
    float: left;
    
    
    <div class="box1">box1</div>  

2、原理：就是让元素脱离文档流，不占用标准流

3、浮动后，不论是会级还是行级元素，都不会独占一行

4、清除浮动；让后面的元素可以掉到后面一行

方法：添加空标签 并设置样式：clear:both;

.clear{
    clear: both;

clear:left;清除左浮动

clear:right;清除右浮动

clear:both;左右都清除

clear:none;都不清除

---

overflow属性：在要清除浮动的父级添加这个样式；(实际中首选)

<style>
.hai{
    border: 1px solid palevioletred;
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
​
}
 </style>

属性值：hidden:清除塌陷的功能；

auto:不超出的内容不剪切，按是否超出做清除浮动；

scorll:内容会被修剪，但是浏览器会以滚动条以便查看；

使用after：添加伪元素,并设定样式；

.hai:after{
    content: "";    //content必须要写，但是后面不加东西；
    display: block;
    clear: both;
}

---

盒子模式：

每个元素都是一个盒子；一个盒子由外边距（margin）,border(边框线)，padding(外边距)和 content（内容）；

内外边距以边框为参照；

系统默认外边距为8px;

1、外边距指的是边框线之外的距离 ；margin/margin-left/margin-right/margin-bottom/margin-top 可以设置任意一个边距，可以带1-4个

1个：上下左右有外边距 2个：表示上下外边距，左右外边距

3个：上边距 左右边距 下边距

四个：上 右 下 左边距

内边距：padding:元素文本内容与边框的距离，用法与margin一样

边框：border:none 无边框 solid :实线边框

double:双实线边框 dotted:点状线边框 dashed:虚线边框

---

display:

用来设置元素的显示方式；

none:不显示元素；

block：块显示，在元素前后设置一个换行符（行级标签转化为块级标签），行级不能设置行高，转换后可以设置宽高

lnline:行内显示，将块级标签转换为行级标签

lnline-block:将块级标签转换为行内级标签

CSS table样式

table:一般不用来布局，主要用来格式化数据。

属性： width; height:

border-collapse:collapse 单线边框 border:边框线

tr,td: width; height: border:边框线 text-align:文本对齐(默认left)

vertical-align:文本垂直对齐（top\middle(默认)/bottom）

列表

不是表述性的内容都可以看成列表：菜单，商品列表等

1、类型：无序列表(ul)，有序列表(ol)，自定义列表（dl）

ol和ul都是用li表示，而dl是由一个dt和一个或多个dd组成

dl一般用来设定一个定义，比如名称解释：dt:标题 dd:描述，对dt的内容进行解释说明。

2、样式：(修改表示类型)

list-style-image;图像

list-style-position:标识的位置

list-style-type:标识的类型

简写：list-style:list-style-image list-style-position list-style-type

list-style-type的属性值：

可以按任意的顺序列出：可以任意省略，只要提供一个值其他都是默认值

无序： disc/circle/square

有序： decimal(数字)/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/lower-greek(希腊字母)/lower-latin(小写拉丁 ；大写就是upper)

有序和无序：none(取消标识符)