前端入门标签

**

前端入门标签

**
盒子模型

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
/* 上 左右 下 /
padding: 57px 50px
/ 消除样式 / 35px;
list-style-type:none;
/ 加粗 /
font-weight: bold;
/ 消除input输入框自带边框 /
border: none;
/ 消除input 输入框被点击时的边框 /
outline: none;
/ 设置圆角 /
border-radius: 3px;
/ 消除下划线 /
text-decoration: none;
/默认文本内容/

/* 按钮/
button
/* 相对定位 */
position: relative;(参照物)
position: absolute;(物)
top(上下偏移)
right(左右偏移)
/设置动态旋转/
@keyframes spin {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
animation: spin 时间 linear infinite;
transform-origin: 50% 98%;
/ 多行选择器/
奇数
li:nth-of-type(2n-1){
color: red;
}
偶数
li:nth-of-type(2n){
color: red;
}
/字体加粗/
font-weight: bold;

       **<!-- 转义字符   浏览器解析&gt; 的时候就会默认把它渲染成1个 **>**   -->
        <a href="">首页</a>&gt;<a href="">教学单位</a>**

/ tabale 快捷键/
<-- table>tr5>td5>a -->**
line-heigth :200px 行高
圆角
border-radius 15px
solid 实线
deshed 虚线
overflow:hidden 超出部分隐藏
text -algin :center 水平居中
letter-spacing:5px 字间距
word-spacing: 15px; 词间距
text-indent:2em 首行缩进
font-family: 楷体;
underline 下划线
line-through删除
text-decoration:none
元素变化
/* 设置元素过度时间2s /
transition: all 2s;
/ 当鼠标悬浮上时 ,宽度 /
/ ul:hover .left{
width: 400px;
} /
/ 从右向左 */
.right {
width: 0;
height: 50px;
background-color: black;

}

ul:hover .right {
    width: 400px;
    position: absolute;
    transition: all 2s;
    right: 0px;
}

标签
h1~h5 标题标签 从h1~ h5 逐渐变小
p 是块标签 独占一行 可以给宽高
span 是行标签 不独占一行 不可以给宽高 多个
行标签可以放在同一行
浮动
什么是浮动,是因为我们在使用 左浮动的时候 会造成下面的第一个标签发生布局混乱
左浮动 float :left 右浮动 float:right
清除浮动: clear:both
自动换行 flex-flow: warp

格式化代码