7. CSS

目录

一.css学习资源

二.引入方式

三.核心内容

四.常用套路

---

---

一.css学习资源

1.   需要搜索的东西 MDN（工具）
2.   cssTricks（工具）
3.   阮一峰 css（博客）
4.   张鑫旭（博客）
5.   css揭秘（书）

---

二.引入方式

1.   内联 style
2.   style 标签
3.   外部文件 css link
4.   @import url(./b.css);

---

三.核心内容

div高度是有其内部文档流元素的高度的总和决定的（内部文档流元素）

文档流：文档内元素流动方向

内联元素的高度：内部字体、字体相关参数

脱离文档流

max-width：mpx   大于mpx，最大mpx,    小于mpx自适应宽度。

四.常用套路

计算距离，根据所需距离减去现在的实际距离。宽高使用padding撑开，不要使用width,height设置。

css各种形状

阿里巴巴矢量图标库

注意：不能使用file协议（双击打开页面，不会显示图标）

 

定位：position  

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

word-break  属性规定自动换行的处理方

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。

background

W3C

vertical-align  属性设置元素的垂直对齐方式

把导航栏固定在顶部，如果固定在底部加bottom:0
.topNavBar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px 0px 20px 0px;
}

子元素浮动，父元素必须清除浮动。

.topNavBar nav > ul {
	float: right;
	list-style: none;
	margin: 0;
	padding: 0;
}

字体外边框，尽量不要设置固定宽高，使用padding撑开。
.userCard .welcome {
	position: relative;
	background: #E6686A;
	color: white;
	padding: 4px 16px;
	line-height: 22px;
}

查看默认样式

F12=>Computen

强制给标签加效果。

.topNavBar nav>ul>li>a:hover::after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	background: #e06567;
	height: 3px;
	/*border-bottom: 3px solid #e06567;*/
	animation: bottoms 0.3s;
}
//动画效果
@keyframes bottoms {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

http://www.divcss5.com/css-jiaocheng/tc50528.shtml

 

 

 

G

M

T

 

 

检测语言世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

 

 

 

文本转语音功能仅限200个字符

 

选项 : 历史 : 反馈 : Donate

关闭