Web前端学习----第三部分-CSDN博客

本文链接：https://blog.csdn.net/weixin_73696461/article/details/127592913

第三部分

CSS盒子模型

组成：content ->padding->border->margin
物品填充物包装盒盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：30px （上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom

注:
1.背景色填充到margin以内的区域（不包括margin区域）
2.文字在content区域添加。
3.padding不能为负数，而margin可以为负数。

box-sizing：
盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box ：width、height - > content
border-box：width、height - > content padding border
使用场景：
1.不用去计算一些值
2.解决一些百分比的问题

对比演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 200px;height: 500px;background-color: red; padding: 50px;border: 10px blue solid ;margin: 5px;}
        #box2{width: 200px ;height: 500px; padding: 50px;background-color: blue;border: 10px red solid;margin: 5px;
        box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box1">这是一个盒子</div>
    <div id="box2">这也是一个盒子</div>
</body>
</html>

盒子模型的一些问题：
1.margin叠加问题，出现在上下margin同时存在的时候，会取上下值中较大的值为叠加值。
2.margin传递问题，出现在嵌套结构中，只对margin-top的问题。

扩展：
1.margin左右自适应是可以的，但是上下不能。
2.width、height不设置时，对盒子模型的影响。（上下两个盒子自动对齐自适）

标签类型

block（块）:div、p、ul、li、h1……
1.独占一行
2.支持所有样式
3.不写宽时候，宽度由内容决定
4.所占的区域一定为矩形

inline （内联）：span、a、em、strong、img……
1.挨在一起
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有间隙，原因：换行产生
inline-block（内联块）：input、select……
1.挨在一起，但是支持宽高

注意：布局一般用块，修饰文字一般用内联标签

标签嵌套规范

(ul、 li) (dl、 dt、 dd) ( table、 tr、 td)

块能嵌套内联
<div><span></span><a href="#"></a></div>
块不一定嵌套块正确：<div><div></div></div>错误:<p><div></div></p>
内联是不能嵌套块

特殊：<a href="#">
			<div></div>
		</a><!--a标签是一个特殊标签，它有它自己的特性，不完全属于内联和块的分类-->

透明度和手势

opacity：0（透明）~1（不透明）0.5（半透明）
注意：占空间，所有子内容也会透明
rgba(): 0 ~ 1
注意：可以让指定样式透明，而不影响其他样式
cursor (手势)
default：默认箭头
要实现自定义手势：
准备图片：.cur 、.ico
例如：cursor:url(./img/cursor.ico/),auto;
最大、最小宽高
min-width、min-height；max-width、max-height
%单位：换算 -> 以父容器的大小换算的

CSS默认值

有默认值的：
没有默认值的：

CSS rest

*{margin :0;padding:0}
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能
body，p，h1，ul{margin ：0；padding：0；}
ul {list-style：none；}
a { text-decoration：none；color： }
img在嵌入块时会有一段空白：

在这里插入图片描述
可以用两种方式解决：

img{dispaly:block}
img{vertical-align:bottom;}bottom(底线)->y的最下面、baseline（基底）- >x的最下面

PS 软件应用

此内容自主动手操作。

float 浮动

文档流
文档流是文档中可显示对象在排列时所占用的位置
float特性
加浮动的元素，会脱离文档流，会沿着父容器靠左靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行来排列。
float取值
left、right、none（默认）

注意：
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

如何清除浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死。不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow : hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
display : inline-block(BFC规范)，不推荐。父容器会影响到后面的元设置空标签；不推荐，会多添加一个标签。
after 伪类：推荐，是空标签的加强版，目前各大公司的做法。

CSS定位

position：
static（默认）、relative、absolute、fixed、sticky
relative：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不能影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
absolute:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖失元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
相对static定位以外的第一个父元素进行定位
父层中若都未定义absolute和relative，则其相对body进行定位
z-infex
数值越大，层次越高（static无效）

文本的首行缩进和间距

p{
            font-size: 20px;
            text-indent: 2em;//首行缩进2字符
            letter-spacing: 10px;//文字间距10px 英文也可以用word-spacing
        }

二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
           list-style: none;
        }
        #box>li{
            width: 150px;
           height: 30px;
           border: 1px;
           text-align: center;
           font-size: 30px;
           line-height: 30px;
           background-color: blue;
        }
        #box>li:hover{
            background-color: white;
        }
        #box>li ul{
            display: none;
            background-color: white;
        }
        #box>li:hover ul{
            display: block;
        }
        #box>li li:hover{
            background-color: green;
            color: white;
        }//">"表示前面的亲儿子选项（靠得最近的）
    </style>
</head>
<body>
  <ul id="box">
    <li>菜单
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </li>
  </ul>
</body>
</html>

补充

width：calc（100%-100px）用于分栏布局
input将选中吧区域扩大到文字部分：

<input type="radio" name="sex" id="man"></input>
<label for="man">男</label>

input提交文件：

 <input type="file">
    <br>
    <form action="填后端方向">
    <input type="image" src=" ">
    </form>

下拉菜单

<select name="" id="" size="1" multiple>//size表示显示几个，multiple表示多选，按shift和ctrl进行多选
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>//value值提交给后端
   </select>

文本域

<style>
/* vertical垂直方向，horizontal水平方向。默认值为both，固定大小为none。 */
    textarea{
        resize: horizontal; 
    }
</style>
<body>
    <div>
   <textarea name="" id="" cols="30" rows="10" placeholder="1111"></textarea>
</div>
</body>

数据列表

 <input type="text" list="mylist">
   <datalist id="mylist">
    <option value="123"></option>
    <option value="31234"></option>
    <option value="45621"></option>
    <option value="13154"></option>
   </datalist>

表单属性
<input type="text" autofocus multiple required>//autofocus表示聚焦，multiple表示可以写多个用逗号隔开，require表示必填。
盒子阴影：
h-shadow:必需的。水平阴影的位置，允许负值
v-shadow：必需的。垂直阴影的位置，允许负值
blur：可选。模糊距离
spread：可选。大小
color：可选，颜色
inset：可选，由内而外的改变阴影