学习资料 :
Google: 关键词 MDN
//重要 CSS Tricks shape(�形状)
Google: 阮一峰 css
张鑫旭的 240 多篇 CSS 博客
Codrops 炫酷 CSS 效果
一本书: CSS揭秘
CSS 2.1 中文 spec
Magic of CSS 免费在线书
- 如何做横向布局（float + clearfix）
- 如何取色、量尺寸、预览字体（Word）
- 如何使用开发者工具查看样式、继承样式
- 四种引入 CSS 的方式：style 属性、style 标签、css link、css import
- 常见 CSS 属性：
font-family font-size font-weight
ul、body 的默认 margin 和 padding
color、background-color、margin、padding
line-height
让li从竖着变成横着
<li style="float: left;">左浮动 right右浮动
让ul前面的原点消失
<ul style="list-style: none;">
除了div其他都有默认样式, 鼠标反键查看默认样式,除去margin和padding=0
加上边框属性
border: 1px solid red;
//重点 浮动的布局问题
第一步: 在子元素中加上
在子控件加上class类<nav style="float: left;">
在子控件加上class类<nav style="float: right;">
第二步:在父元素上class加上clearfix:
例如: <ul class="clearfix"></ul>
.clearfix::after{
content: '';
display: block;
clear: both;
}
//去掉下划线
text-decorarion:none;
//字体加粗
font-weight:bold;
//当字体悬停的 关键字:hover
.topNavbar > nav > ul > ui > a:hover{
//例如加个底部边框
}
color是可以继承的
position: fixed; 脱离文档流 就是只针对屏幕做frame,
脱离文档流的时候 width:100% 会出bug;
宽度100%会加上左右padding的值 导致宽度超长
解决方法:
在最外面的div里面加个div
外面的div设置 pandding上下20
里面的dic设置 pandding左右20 完美解决~!
image:
background-position 第一个center背景水平居中
第二个center背景竖值居中
background-size:cover 盖住所有的面积,按照比例缩放
margin-left/right: auto 控件水平居中 死记
内联元素制定宽高没有效果. 使用这个字段display: inline-block;即可解决
/*
display: inline-block;
width: 70px;
height: 29px;
line-height: 29px;
text-align: center;
*/
这是新手的做法
另外一种做法设置内边距属性: padding: 3px 16px;
设置内边距就可以根据文字去设置宽高. 这样减少开发难度.
//重点
css画一个三角
div{
border: 10px solid red;
width: 0px;
height: 0px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
}
box-sizingh:
两种属性 border-box属性: 是包含pandding和margin的边距
content-box属性:是不包含pandding和margin的边距
//八卦的css
.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
使用iconfont的三步骤
第一. 申请账号 把图片拉入一个创建的项目中
第二. 点击symbol 显示在线链接出现下面的js 点击右边的帮助文档一步复制在代码中操作即可
svg图片上面靠边了 下面有点间距 vertical-align: top;解决问题 不知道为啥
css进阶
伪元素 例如div
div::before{
content:" ["
}
div::after{
content:" ]"
}
为什么叫伪元素 因为是选不中不存在的元素
一定要给content属性不然不会给值
还有要给display:block;
如果你给了这个子元素position:absolute 绝对定位
父元素position:relative 相对定位
就可以不加display:block
八卦其实就是加两个伪元素 然后两个border
关键帧 动画转
@keyframes: spin {
form{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
给元素添加
animation-duration:3s; //3秒周期
animation-name: spin; //元素
animation-iteratin-count: infinte; //永久动画
animation-timing-function: linear; //匀速
最关键的就是直接查css animation MDN(重要) 然后根据提示的代码更改
下载东西按钮 使用a标签:例如 _block代表新开的窗口 download代表下载
<a class="downloadResume" href="./a.pdf" target="_block" download>下载简历</a>
搜索css shadow generator geogle阴影的查询代码
transition: box-shadow 1s; 一秒钟阴影变化
子元素里面的偶数 even偶数 odd单数
li:nth-child(even)
display: inline-block; 根据元素内容限制宽度
vertical-align: top; 修复上面引用造成的bug 底部会上来一些
