CSS布局与技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42100915/article/details/80475099

几款插件

画图 https://www.hcharts.cn/demo/highcharts

http://echarts.baidu.com/echarts2/doc/example.html

模版 http://js.mobanwang.com/special/allcss/

小图标 http://fontawesome.dashgame.com/

css样式 https://v3.bootcss.com/css/

jquery http://www.htmleaf.com/

图片 http://huaban.com/

css优先级

!importang 最高10000
标签内，内联 1000
.name 100
.class 10
标签数 1
继承 0.1

同等优先级后写的优先

常见块级元素：div, form, table, p, h1~h5, dl, ol, ul
常见内联元素：span， a, strong, em, lable, input, select, textarea, img, br

内联标签：不能设置长宽
块级标签：不能再一行显示
display：inline 改为内联标签
display：block 改为块级标签
display：inline-block 自带边距
解决方法：1 加一个父标签给父标签添加间距属性word-spacing：-px
2 margin:-px 外边距

display：none 不显示位置也被隐藏

background:可以放所有属性
no-repeat：不重复
url: 地址

文本属性：
fond-size：字体大小
text-aligen：文本位置（center居中，
line-height:行高
letter-spacing:字符间距
text-transform：capitalize :首字母大写

边框属性：
border:可以放所有属性 solid：边框
-color:颜色
-style:样式
-width:宽度

单一一面有位置参数

边框变圆：border-radius

内外边距：
<body>默认自带内边距 margin:0px</body>
border：边框 border变大后整个盒子会变大
padding：内边距加方向 padding变大后整个盒子会变大
margin：外边距加方向顺序：上->右->下->左
content：盒子的内容

注意：
塌陷
margin:上下取大的像素
左右没有塌陷取像素和

margin 距离父盒子距离
父盒子必须有内容如果父盒子没有任何内容或者margin，padding，border
或者添加overflow:hidden
否则就会一直向上找

float浮动
absolut，float脱离文档流，

其他盒子在定位的时候，会当脱离文档流的元素不存在clear：清除浮动none，left，right，both（不允许有浮动对象）只改变自身只能看前一个元素加入到css 样式中

#class:after{
content:''; 文本内容
display:block; 转换为块级元素
clear:both; 清除浮动

}

position绝对定位：
position默认static静态
position:relative 相对定位没有脱离文档流:距离自己原来的位置定位
position:absolute 绝对定位脱离文档流根据父标签定位
position:fixed 固定到一个位置不会变动

一般relative作为父标签absolute作为子标签

margin: 0 auto; 盒子居中

heigt: auto; 自适应！important最高级不会被覆盖

overflow:hidden; 溢出的部分隐藏

min-height: px; 最小高度

text-align:center; 文字居中

line-height: px; 行高

text-decoration: underline; 添加下划线