day4CSS浮动布局&盒模型

最新推荐文章于 2023-09-23 21:07:00 发布

Tiny_G

最新推荐文章于 2023-09-23 21:07:00 发布

阅读量220

点赞数

分类专栏： Web前端基础文章标签： css html html5 web

本文链接：https://blog.csdn.net/qq_45801179/article/details/109644370

版权

Web前端基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.浮动

1.1什么是浮动？

浮动就是让块级标签不独占一行。

目的：块级标签排在一行

1.2浮动的原理：

就是让元素脱离文档流，不占用标准流。

1.3浮动的属性值

left ：元素向左浮动。

right：元素向右浮动。

none ：默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit ：规定应该从父元素继承 flfloat 属性的值。

浮动后，后面的元素（块级/行级）都不会显示在下一行

1.4清除浮动

让后面的元素自动掉到下一行

方法：

1）添加标签，并设置样式：clear:both;

clear:left/right/both/none(都不清除)

<div  class="clear"></div>

2)在要清除浮动的父集添加样式：overflow：hidden

visible ：默认值。内容不会被修剪，会呈现在元素框之外，不剪切也不添加滚动条。 

 auto ：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。 

 hidden ：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷 的功能。 

 scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

3）在要清除浮动的父集添加伪元素，并设定样式


.wrapper{
    coentent:"";
    display:block;
    clear:both;
}

注意：在实际项目开发中使用第二个方案

2.CSS盒子模型

每个元素都是一个盒子，一个盒子由margin,border,padding,content组成

IE的盒子中的content又由padding和content组成

系统默认外边距为8px。

1）外边距margin:指元素边框线之外

margin-left/margin-right/margin-top/margin-bottom

margin：可以用来设置任意一个边的边距

一个(apx)：表示上下左右都是这个外边距apx

两个(apx bpx)：上下为apx 左右为bpx

三个（apx bpx cpx）上为apx 下为cpx 左右bpx

四个（apx bpx cpx dpx）：上为a 右为b,下为c,左为d

2)外边距padding

padding-left/padding-right/padding-top/padding-bottom

3)边框

就是围绕元素内容和内边距的一条或多条线，设置边框的最简单的方法就是使用 border 属性，允许规定元素边框的样式、宽度和颜色

border-width : 设置边框的宽度。

border-style : 设置边框的样式。

none: 默认值，无边框。
solid： 定义实线边框。
double 定义双实线边框。
dotted`: 定义点状线边框。
dashed：定义虚线边框。

border-color : 设置边框的颜色。

border 边框的简写：

{width style color} ：定义宽度为width，样式为style，颜色为color的边框。

.wrapper { 
border-width: 1px;
border-style: solid;
border-color: red;
}
/* 等同于 */
.wrapper {
border: 1px solid red; 
}

4）盒子的真实尺寸

盒子宽度 = width + padding左右 + border左右

盒子高度 = height + padding上下 + border上下

5）displaly属性：用来设置元素的显示方式

常用属性值：

none：不显示元素

block:将元素设成块显示，在元素的前后设置换行符目的：行转块

（因为行级标签不识别宽高，而块级标签会识别，转换后，行级标签也可以设置宽高）

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

inline-block:将块级或行级标签转换为行内块级标签。（会产生一个间隔距离）

解决：margin-right:-5px;

3.table样式

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

属性：

width

height

border-collapse:collapse:单线边框

border：边框线

td,tr属性：

width

height

border-collapse:collapse:单线边框

text-align:(left(默认值)/right/center)文本左右对齐方式

vertial-align:文本垂直对齐方式（top/middle[默认值]/bottom）

4.列表样式

不是描述性的文本的任何内容都可以认为是列表。比如，菜单，商品列表等。

1)列表样式

无序：ul

有序：ol

自定义：dl

ol ul的列表项都是用li表示的，而dl是有一个dt和一个或多个dd组成的。dl 一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt进行描述说明的

2）样式(用来修改标识类型)

list-style-image:用图像表示标识

list-style-position:标识位置，inside（占用文本）,outside(默认值)

list-style-type:标识类型

简写：

list-style:list-style-image list-style-position list-style-type

list-style的值可以按任意顺序列出，而且可以任意忽略，只要提供其中一个值，其他都是默认值

list-style-type的属性值：

a)有序

disc（默认值）/circle/square

b)有序

decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin

有序和无序：none

5.轮播图

主要用于产品的展示或公司的相关宣传

组成：

1）轮播的组图（至少两张以上）

2）控制器:position:ab

3）计数器:cursorry：pointer将鼠标移到上面呈手型

opacity 0-1 透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <link rel="stylesheet" href="../css/text_banner.css">
</head>
<body>
<!--
.carousel>ul.carousel-imgs>li*3>a[href="#"]>img[href="banner_0$.jpg" alt=banner]
-->
<div class="carousel">
    <!--banner组图-->
    <ul class="carousel-imgs">
        <li><a href="#"><img src="../img/banner_01.jpg" alt="banner" ></a></li>
        <li><a href="#"><img src="../img/banner_02.jpg" alt="banner" ></a></li>
        <li><a href="#"><img src="../img/banner_03.jpg" alt="banner" ></a></li>
    </ul>
    <!--控制器-->
    <div class="prev"></div>
    <div class="next"></div>
    <!--计数器-->
    <div class="count">
        <ul >
        <li class="active"></li>
        <li></li>
        <li></li>
        </ul>
    </div>

</div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
li{
    list-style-type: none;
}
a{
    text-decoration: none;
}
.carousel{
     width: 1000px;
     height:300px;
     /*border: 1px solid #999999;*/
     margin: 0 auto;
     background-color: #cbd0b8;
     position: relative;/*相对定位*/
     overflow: hidden;
 }
/*轮播组图*/
.carousel-imgs{
    width: 99999px;
}
.carousel-imgs img{
    width: 1000px;
    height: 300px;
}
.carousel-imgs li{
    float: left;
}
/*控制器*/
.prev,.next{
    width: 32px;
    height: 32px;
    top:50%;
    margin-top: -16px;
    position: absolute;/*绝对定位，脱离文档流*/

}
.prev{
    background-image: url(../img/prev.png);
    left:50px;

}
.next{
    right: 50px;
    background-image: url(../img/next.png);
}
.count{
    width: 1000px;
    height: 10px;
    position: absolute;/*绝对定位，相对于relative计算*/
    bottom: 30px;
}
.count ul{
    width: 90px;
   /* height: 10px;*/
    margin: 0 auto;
  /*  background-color: #e10000;*/
}
.count ul li{
    width: 10px;
    height: 10px;
    background-color: #40c8ed;
    opacity:0.5 ;
    cursor: pointer;/*鼠标移上去的时候呈手型*/
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}
.count ul .active{/*权重问题*/
    background-color: #306d91;
    opacity:1;
}