爱站程序员基地1、css选择器
1)标签选择器div{}2)类名选择器.one{}3)id选择器#one{}4)通配选择器*{}样式初始化5）逗号选择器div, .one{}6)组合选择器div.one{}7)子代选择器div > .one{}8)后代选择器div .one{}9)兄弟选择器通用兄弟选择器div ~ .one{}相邻兄弟选择器div + .one{}10）属性选择器[type][type=text]<input type=\'text\'><input type=\'password\'>[type=\'password\']11)伪类选择器:first-child{}:last-child{}:nth-child(n){}1、2、3、4、odd、even12）伪元素选择器::after{}::before{}用法：1.导航栏的侧边2.清除浮动jQuery$(\'.div\')$(\'#div\')
2、浮动布局
文档流float:left/right;特点：1）使用了浮动的元素会失去对父元素的支撑2）使用了浮动的元素的宽高由内容决定3）使用了浮动的元素在网页中原本的位置由其他块级元素替代4）使用了浮动的元素会在一行从左向右排布，当前行宽度不够时，会自动换行清除浮动的方式：1.浮动元素的父元素.parent::after{content:\'\';clear:both;display:block;}2.浮动元素的父元素.parent{overflow:hidden;}3.浮动元素的下一个相邻兄弟.one{content:\'\';clear:both;}
3、样式规则
1)字体样式 font-color 字体颜色font-style 字体样式italic 斜体normal 正常字体【默认】font-weight 字体粗细normalbold 加粗lighter 更细的100~900 数字越大，字体越粗line-height 行高取值等于该字体的包裹元素的高度<div style=\'height:200px;\'>123</div>line-height:200px; //文字垂直居中font-size 字体大小浏览器默认字体大小为16pxfont-family 字体族字体族的名称\'微软雅黑\'\'Miscrosoft YaHei\'serif 有衬线sans-serif 无衬线fangsong 政府文件font1.必须包含font-size、font-family2.font-style、font-weight必须在font-size之前3.font-family必须在最后速写：font：font-style font-weight font-size font-family；webfont@font-face.ttf1.下载ttf字体文件2.将文件放到相对应的目录下（项目的目录）3.通过@font-face引入@font-face {font-family: \'test\';src: url(\'./文件名.ttf\');}4.使用字体div{font-family:test;}字体图标库iconfont、fontawesome博客总结文字居中、元素的居中2)文本样式 text-text-align 当前文本在元素中的对齐方式leftcenterrightjustifytext-decoration 文本的线underline 下划线overline 上划线line-through 删除线text-transform 文本变形capitalize 首字母大写uppercase 全部大写lowercase 全部小写text-shadow 文本的阴影px x轴偏移量px y轴偏移量blur 模糊程度color 阴影颜色text-shadow:10px 5px 5px #3333333）列表样式list-style:none;4）单位1.颜色1、关键字red、black...color:red;2、十六进制颜色#333333color:#333;3、rgb函数r redg greenb blue0~255color:rgb(255,255,0);4、rgba函数r redg greenb blue0~255a 颜色透明度a ~ 1color:rgba(0,0,0,0.5);5、渐变色background-image: linear-gradient(to rigt,red,#ccc);2.尺寸绝对单位px相对单位em等于父元素的font-size<div style=\'font-size:12px;\'></div>1em = 12px;2em = 24px;% 相对于父元素5）文本的水平垂直居中、子元素在父元素中水平垂直居中文本水平：text-align：center；垂直：line-height：父元素的高度；标签父元素display：table-cell;vertical-align:middle;align-items:center;子元素display:inline-block;如何消除a标签的默认样式？text-decoration:none;color:black；cursor:default;pointerhelpwait...rgba和opacity的区别？rgba 会给父元素设置透明度，但是不会影响到子元素opacity 会给父元素设置透明度，会影响到子元素
4、盒子模型
1）盒子属性widthheightmargin 外边距盒子与其他盒子之间的距离margin-top 上外边距margin-right 右外边距margin-bottom 下外边距margin-left 左外边距margin:10px; 上下左右都为10pxmargin:5px 10px; 上下为5px，左右为10pxmargin:5px 10px 15px; 上为5px，左右为10px，下为15pxmargin:5px 10px 15px 20px; 上为5px，右10px，下15px，左20pxborder 边框border-width 边框线宽pxborder-style 边框样式solid 实线dotted 点状线dashedpadding 内边距盒子边距与内容之间的距离backgro-color 背景颜色backgro-image 背景图片backgro-repeat 背景图片重复的方式backgro-size 背景图片尺寸background-size:100% 100%;2）盒子组成width、padding、border、margin3）盒子分类通过box-sizing可以设置盒子的类型1.box-sizing:content-box;【内容盒子】【w3c标准盒子】width = 内容width所占的宽 = width + border + padding + margin2.box-sizing：border-box;【边框盒子】【iE盒子】width = 内容width + border + padding4）边框塌陷（margin塌陷）10px浏览器中，上下排布的两个盒子之间的距离，取其中margin较大的那个值，不会相加水平方向则不会出现此现象
1-浮动布局（exercise）
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>浮动布局</title></head><style>.parent{background-color: red;/* 方式一overflow: hidden; */}/* 方式二.parent::after{content: \'\';display: block;clear: both;} */.child{height: 100px;width: 100px;background-color: #cccccc;float: left;}/* 方式三.parent div:last-child{clear: both;content: \'\';} */</style><body><div class=\"parent\"><div class=\"child\">子元素</div><div></div></div></body></html>
2-字体样式（exercise）
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>字体样式</title></head><style>div{color: blue;font-style: italic;font-weight: lighter;height: 200px;background-color: #cccccc;line-height: 200px;/* font-size: 16px;font-family: sans-serif,fangsong; */font:italic lighter 17px sans-serif,fangsong;}</style><body><div>hello world，你好世界</div><h1>标题</h1></body></html>
3-网络字体（exercise）
webfont.html:
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>网络字体</title></head><style>@font-face {font-family: \'myfont\';src: url(\'./\');}div{font-family: myfont;}</style><body><div>hello world，你好世界</div></body></html>
webfont.css：
@font-face {font-family: \"iconfont\";src: url(\'//at.alicdn.com/t/font_1941489_ela7dk9zb1n.eot?t=1594641647731\'); /* IE9 */src: url(\'//at.alicdn.com/t/font_1941489_ela7dk9zb1n.eot?t=1594641647731#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */url(\'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMcAAsAAAAABtAAAALQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBXIFZATYCJAMICwYABCAFhG0HLhv9BRHVk61kX2NsDK0eUaISkolGprJ1WeHdTHGExzLF/ICVQhW8AAAAAABZtZY9e/u0F0CScaiQbXhPBsgCoSNWBOXDlmQcoP3j4Z9j730/0tIT6IMkYIPkNqA1RuOOF/G+0CJXp0ZDU9gAmSyN96OKd/wfJ+l15HoPjuE1zh4gvh4gYPrXDIOw0AIgh0wIDq6p/wuggeQBza0qrTEScGDTgUam8Bpk6BvGLniB84EAgp8YNCyyipDD2c0IQLulVo5cwYHjLGxGjA19U+gWaebEGdtSGIm+T/+SMANjSLLj8hbJVeh+HRwfrXoBAicQNNgAUAAxAA40agzkSCJGUIhAShAcK5rg7fCBCnRUOYj9dXakDQDwgYxnYnqsR41kAIAnldmgZNIZANbxsvW5301On7sUTZmfvKjFON0KV1c2WtdFgb9uiDh4HCcjJs8329xJ+19EVtNU1a9YvNiiKNYWSokbniCLZ4XOe9iK+/ZOMvR8fr6G7d8IpJU0p8LlknS4w6vZ4rj66Chx37xNXZ63ZchprMk6s7oavK5D7I9anJYCLScakSMe9sectBCJLgD0N66Sfr/2Nxi31JXax/8P1RQAeEr2PiOb/iaGmQDzDRgJfiRzYAE32LaSpTRmo4nJntSUAQQB0GGLk9epEte71hFzgcmAMfEFhVkIyvExYKCKBSOzJBCipQ5WOauXRKk8IEoXAOJgDxg7l6BwcINy/AsYuHkHI4dQQCgJ5zFVzFFqjFfBB9y+UN6pM65adBw9Q/tsrpxnR8QVcl+6IQ6icniKHfISHfqXTUQMGKYWCrAYNg2BZ6rwLoET8XkYmqYbBXdqlYbxKvgAty8o79SZoLzoyudnaJ/NlTtS6rQr5L6sHsQC0QB0KugGpTzKIf3LJkQMMEwtKIAOGydAwDfXqvAuATfB53MhKmWGCoLtRe0PpLMMbOkgnOSkVtSiUg==\') format(\'woff2\'),url(\'//at.alicdn.com/t/font_1941489_ela7dk9zb1n.woff?t=1594641647731\') format(\'woff\'),url(\'//at.alicdn.com/t/font_1941489_ela7dk9zb1n.ttf?t=1594641647731\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url(\'//at.alicdn.com/t/font_1941489_ela7dk9zb1n.svg?t=1594641647731#iconfont\') format(\'svg\'); /* iOS 4.1- */}.iconfont {font-family: \"iconfont\" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-home:before {content: \"\\e65c\";}
4-文本样式（exercise）
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>文本样式</title></head><style>div{width: 200px;background-color: #cccccc;text-align: justify;text-decoration: overline;text-transform: uppercase;text-shadow:10px 5px 5px #333333}/* 消除a标签的默认样式 */a{text-decoration: none;color: black;cursor: default;}</style><body><div>hello worldhello worldhello worldhello worldhello world</div><a href=\"\">11112222s</a></body></html>
5-某易严选（exercise）
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>网易严选</title></head><style>*{padding: 0;margin: 0;list-style: none;}.center{height: 361px;width: 1090px;margin: auto;}ul li{width: 265px;height: 361px;float: left;margin-right: 10px;cursor: pointer;}ul li:last-child{margin: 0;}.imgUrl{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220051-60bfe89379ac8.jpg 265px;height: 265px;}.imgUrl1{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220051-60bfe893b5559.jpg 265px;height: 265px;}.imgUrl2{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220051-60bfe893ef71b.jpg 265px;height: 265px;}.imgUrl3{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220052-60bfe89451fc5.jpg 265px;height: 265px;}.desc{height: 91px;margin-top: 5px;text-align: center;}.desc div{margin-bottom: 10px;}ul li:hover .imgUrl{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220052-60bfe89484021.jpg li:hover .imgUrl1{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220052-60bfe894b65e1.jpg li:hover .imgUrl2{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220052-60bfe894e7b68.jpg li:hover .imgUrl3{background-image: url(\'CSS/https://aiznh.com/wp-content/uploads/2021/06/20210608220053-60bfe89522d39.jpg li:hover .desc{background-color: #f4f0ea;}.kong{height: 21.0833px;}</style><body><div class=\"container\"><div class=\"center\"><ul><li><div class=\"imgUrl\"></div><div class=\"desc\"><div>新品限时购</div><div>日本超浓缩48小时抗菌消臭洗衣液</div><div>￥49</div></div></li><li><div class=\"imgUrl1\"></div><div class=\"desc\"><div class=\"kong\"></div><div>切丝器切蒜器 家用食物多功能料理机</div><div>￥29.9</div></div></li><li><div class=\"imgUrl2\"></div><div class=\"desc\"><div>新品限时购</div><div>万古不易，锁味增鲜 日本万古烧饭釜</div><div>￥129</div></div></li><li><div class=\"imgUrl3\"></div><div class=\"desc\"><div>新品限时购</div><div>女式可机洗天丝平底鞋</div><div>￥139</div></div></li></ul></div></div></body></html>
