html和css总结

2021-07-25 17:33:23 作者：互联网

HTML

1.bgcolor 背景
2.background背景图片
3.ul和li中type代表样式，像原点，正方形一样 type=‘square’代表前面是正方形
4.图片标签：
5.h标签代表超链接 <a href=’’" target="">target=’_blank’代表新窗口打开 target=’_self’代表自身窗口打开
锚点链接问题通过给h标签设置id，再通过的方式跳转，实现小说的跳到顶部方法
text-decoration=none；去掉超链接下划线
6.<font size=‘7’ color=‘red’ face=‘楷体’ align=’left‘ 对齐方式>
7.合并单元格 rowspan=’2‘横向合并 cosplan=’2‘纵向合并
8.cellspacing 代表单元格与单元格之间的间距，cellpadding代表单元格与内容之间的距离
9.表单中常用的属性 disabled=‘disabled’代表表单禁用 placeholder=’'代表可以文本中默认和value相似
maxlength=’6‘代表最大长度，可以控制输入长度，required=’required‘ 代表空白不能提交 checked='checked’表示被选择
select 标签，下拉复选框，搭配option标签其中select=’select‘属性代表默认选择
textarea可以设置大文本框，reset设置提交按钮
10.frameset代表框架标签

css

1.纯净的块标签div 纯净的行标签span
2.css文件的三种样式
第一种：内联样式
第二种：内部样式

去掉页面预留间距 margin：0 去掉页面所有元素自带间距 padding：0
移上父元素控制子元素 #id：hover>div{}
position:元素的定位方式 relative 相对定位 absolute 绝对定位
relative时，设置元素间的间距 margin-left： 10px margin-right：20px
css设置上下间距时，对行标签不起作用。块标签，上下左右都起作用
绝对定位，设置距离原点的位置 top:450px; left:130px; bottom: ; right: ;
当元素嵌套时，你里面的元素是绝对的，你也要把方式写出来
行转块：display：block；块转行：display：inline；转换成行内块标签：display：inline：block；
隐藏元素：display:none;元素所占有位置不存在了 visibility：hidden；隐藏元素但位置还在
nth-child（）并列时可以选择 box-shadow：5px 5px 5px gray 阴影：左右上下阴影发光范围阴影的颜色
float：left 让块元素浮动一字排开 line-height：设置成行标签高度可以居中
15.层溢出问题
overflow: auto 自动添加滚动条
overflow:hidden 溢出的内容隐藏
overflow:scroll; 溢没溢出都加滚动条
overflow:visible; 溢出的显示出来，默认值
16.层溢出问题：z-index：10；调整层的叠放顺序，值越大就放在最上面
17.鼠标的指针样式
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
18.部分字体设置
span{
color:rgba(0,0,0,0.5);
/* 字体大小的单位 px pt mm cm*/
font-size: 20mm;
/* 加粗： 100—900 bold bolder /
font-weight:bold;
/ 字体 /
font-family: 楷体;
/ 斜体 /
font-style:oblique;
/ 字体阴影左右上下发光范围阴影颜色 /
text-shadow: 15px 5px 5px gray;
}
19.背景图片设置
body{
background-image: url(img/timg.jpg);
/ 图片不要重复 /
background-repeat:no-repeat;
/ 图片的尺寸 /
background-size:100% 800px;
/ 固定背景图片 /
background-attachment: fixed;
/ 上下左右 */
background-position:20% 10%;
}
/* 设置内间距时，为了不撑大外框，把这个属性也设置上 /
box-sizing: border-box;
/ 去掉线条，一般会去掉a标签默认的下划线 /
text-decoration:none;
/ 字符间距 /
letter-spacing: 5px;
/边框粗细，边框颜色，线条/
border:2px #FF0000 solid;
21 动画效果演示：2d转3d
/ 位移动画左右上下 /
transform: translate(150px, 150px);
/ 旋转动画负数值，逆时针转 /
transform: rotate(-45deg);
/ 缩放动画 /
transform: scale(2);
/ 扭曲动画 /
transform: skew(15deg,25deg);
/ 你要过渡的属性，过渡时长，延迟过渡，过渡速率 /
transition:all 1s 1s linear;
22.大小写转化：
text-transfrom ：uppercase 小写转大写 lowercase 大写转小写
22.段落缩进：p{
/ em 缩进原来字符大小的2被 /
text-indent: 2em;
/ 1.5 倍行高 /
line-height: 1.5em;
}
23.列表属性：/ 列表项前面的集合图形 /
list-style: none;
24.filter / -moz- 前缀，为了兼容浏览器，兼容新CSS属性 /
transition:filter 1s;
25.流氏布局：（页面布局：为了更好的适配屏幕大小，布局时，有一种流式布局。
就是宽度不写死像素，而是采用百分比）
最大伸缩宽度：max-width=960px；
最小伸缩度：min-width；
自动居中 magin=0px auto；
/ 对于行内块元素，他还有一个上下居中的属性 */
vertical-align: middle;
Emmet语法：
```




```
27.弹性盒子：/* 把外层设置为弹性盒子 /
display: flex;
/ justify-content:水平方向的对齐方式 center 居中 flex-start 左对齐 flex-end 右对齐 /
justify-content:space-around;
/ 盒子里面子层的排列方式
row 横向排列
row-reverse 横向反转排列
column 数值排列
column-reverse 数值反转排列
/
flex-direction:row;
/ 垂直方向的对齐方式 center flex-start 子层顶着顶部 flex-end 子层顶着底部*/
/* 把子层高度拉伸，吃满父层，注意那子层就不要给高度 /
align-items: center;
/ 自动换行，当所有子层的宽度或高度，超过了父层，是否要换行
nowrap 不换行
warp 自动换行
/
flex-wrap:wrap;
/ margin-left: 10px; /
/ margin: auto auto; 子层上下左右自动居中*/
/* 距离上面10px 左右自动居中 /
/ margin: 10px auto; /

1
/ 子层宽度所占的比例 */
flex-grow: 1;

标签：总结,flex,标签,元素,子层,html,设置,auto,css
来源： https://blog.csdn.net/weixin_57674829/article/details/119084558