![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
猫气
这个作者很懒,什么都没留下…
展开
-
版心和布局
版心(可视区) 常见宽度:960px ,980px,1000px,1200px;布局流程:确定版心 分析页面中行模块以及每个行模块中的列模块 制作Html结构 Css初始化,用盒子模型,通过div+css布局来控制各个模块一列固定宽度且居中,两列左窄右宽,通栏平均分布...原创 2020-10-09 14:36:56 · 463 阅读 · 0 评论 -
css三大特性
层叠(重叠)性:后声明的样式会覆盖前面声明的某些样式继承性:子标签会继承父标签的一些样式优先级:当同一个元素有多个选择器,它会显示哪个选择器的样式,就有优先级的产生根据权重通配符和继承:0,0,0,0标签:0,0,0,1类和伪类:0,0,1,0id选择器 :0,1,0,0!important:1,0,0,0权重不会有进位,只会指出下一个值.nav ul :0...原创 2019-11-04 18:59:07 · 104 阅读 · 0 评论 -
flex布局
CSS3伸缩布局:不会影响任何盒子flex:伸缩布局给父元素display:flex,子元素flex:1 ,则每个盒子各占1份flex-direction:column;垂直布局原创 2020-10-09 14:35:51 · 102 阅读 · 0 评论 -
字体图标
本质是文字下载:https://icomoon.io 点击icoMoonApp找到需要的图标,选择,下载(还可以编辑图标(旋转。。。。)),然后下载,引入到HTML,fonts文件夹(里面文件不能删除)Import Icons可以导入自己本地的svg转换成字体图标要加入新图标的话,Import Icons选择导入selection.json,然后下载就行...原创 2020-12-04 10:57:24 · 65 阅读 · 0 评论 -
精灵图,滑动门
精灵图:网页一些背景图片整合到一张图片上可以减少浏览器请求图片的次数(但一般小公司不用,难维护)用background-position{/*用firework打开,要哪个图就找哪个的位图,找宽高和x轴y轴*/ width:xx; height:xx; background-image:url() no-repeat; ba...原创 2020-12-04 10:57:10 · 107 阅读 · 0 评论 -
定位Position
定位属性:1:边偏移 top ,bottom,left,right2:定位模式static 默认定位,静态位置就是各元素在html文档中默认的位置。唯一用处:就是取消定位relative 每次以自己左上角为基准点位置移动,它的位置仍然保留absolute若父级没有定位或者没有父级,以当前屏幕(浏览器)为基准点对齐 父级有定位,则根据最近的已经定位的父级为基准点对...原创 2020-12-04 10:52:08 · 79 阅读 · 0 评论 -
浮动 float
普通流(标准/文档流):盒子自上而下,从左到右排列,浮动:让多个盒子(块级元素)在一行内显示 脱离文档流,会影响标准流,对后面的盒子有影响<style> /*普通流 盒子自上而下排列 .up{ width: 300px; height: 200px; background-color:pink; } .down{ width: 300...原创 2019-10-19 17:01:41 · 130 阅读 · 0 评论 -
盒子
盒子居中外边距实现margin 左右外边距设置为auto必须是块级元素 盒子必须指定高度margin:0 auto; /*通俗写法*/margin-left:auto;margin-right:auto;margin:auto;外边距合并如果上面元素有下边距,下面元素有上边距,最终两个盒子的距离是最大的那个为准外边距塌陷 给子盒子加margin-top解决方...原创 2020-12-04 10:57:51 · 109 阅读 · 0 评论 -
元素显示
块级元素 <h1>~<h6>,<p>,<ul>,<li>,<div>p,h1 dt等为文字类的块级元素 里面不能放块级元素占一行,有宽高(默认100%)行内元素 a,strong ,b,span,u等a可以放块级元素链接里不能再放链接和相邻元素在一行, 宽度取决于内容宽度, 水平可设paddi...原创 2019-10-19 11:51:29 · 115 阅读 · 0 评论 -
字体font
font-size: px,em(相对于当前对象内文本的尺寸)网页常用的宋体,微软雅黑,黑体等字号:普遍14px+,尽量用偶数字体中包含空格,# ,$等用单引号或双引号font-weight:字体加粗(建议用数值),normal=400,bold=700a{/*font-weight:bold;字体加粗*/font-weight:700;/*700没有单位 ==bold*...原创 2019-10-19 09:53:54 · 380 阅读 · 0 评论 -
css选择器
行内,内部,外部外部q<link ref="stylesheet" type="text/css" href="xx.css"/>类选择器 .classname{ } 可使用多次class="classname" 导航class=" nav"一个div 只有一个class属性多类名 class="classname1 classname2" 既有1...原创 2019-10-18 22:45:03 · 101 阅读 · 0 评论 -
设置100%却无法铺满屏幕
设置了宽度为100%,如果直接.class-name or #id-name{width:100%;height: xx px;}无法实现铺满屏幕,必须设置整个的页面的margin,padding.即在最开始设置*{margin:0;padding:0;}即可实现(去掉浏览器margin和padding的默认样式)...原创 2017-10-12 20:40:34 · 5574 阅读 · 0 评论