ZbyFt
ZbyFt

HTML和CSS进阶

HTML和CSS进阶

1.内外边距
padding(内边距):  用于控制内容与边框之间的距离
例如，padding:10px，20px;  顺时针，可以这样理解，鼠标到包装盒的距离
border(边框):   围绕在内边距和内容外的边框
例如，border-top:10px solid red;  包装盒的厚度
margin(外边距)：用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到互相隔开的目的，例如，两个盒子之间
margin父子塌陷问题，上下会出现，左右没有
解决办法，父类里面加属性border,   padding,   在里面添加文本内容，任何一种都可以
margin兄弟塌陷，上下会出现，以大的外边距为主；
content(内容):  盒子的内容, 显示文本和图像.，就相当于鼠标
设置宽度和高度
width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
盒子的真实尺寸：盒子宽度 = width + padding左右 + border左右

外间距居中技巧：如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素
例如，/* 子元素上下外边距设为0，左右设置为auto */

margin: 0px auto;

2.补充background
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-image: url('./images/logo.png');
background-repeat: repeat-y;  # 平铺纵向

background-color: pink;

3.列表标签
有序列表
     

无序列表 

list-style:none;  消列表前面的序号或者是点 

4.HTML表单
使用方式:


标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式(会在输入网址框里看到，并且网址框还有长度设定，不安全)和“post”方式（会在浏览器的Network里看到）
标签