单选框与复选框实现点击文字也可选中
第一种方法
<label> <input type="radio" name="gender" value="male" />男 </label><label> <input type="radio" name="gender" value="female" />女 </label>
第二种方法 - 注意是id的值要与label for的值相同
<input id="male" type="radio" name="gender" value="male" /><label for="male">男</label><input id="female" type="radio" name="gender" value="female" /><label for="female">女</label>
一个完整的表单注册的例子
<form action=""><input type="text" name="name" placeholder="请输入昵称" /><textareaname="sign"rows="5"cols="30"placeholder="请输入个性签名"></textarea><input name="password" type="password" placeholder="请输入密码" /><label> <input type="radio" name="gender" value="male" />男 </label><label> <input type="radio" name="gender" value="female" />女 </label><label> <input type="checkbox" name="interest" value="coding" />编程 </label><label> <input type="checkbox" name="interest" value="other" />其他 </label><select name="career"><option value="default">请选择职业</option><option value="staff">公司职员</option><option value="freelancer">自由职业者</option><option value="student">学生</option><option value="other">其他</option></select><button type="submit">注册</button></form>
高级选择器
后代选择器
书写规则：用空格隔开，例如
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */#password .box p{}/* 选择所有p标签内部的所有span标签 */p span{}/* 选择所有p标签内部的所有类名为spanItem的标签 */p .spanItem{}
交集选择器
交集选择器的书写规则，例如
<a href="#" class="special">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a>/*所有a标签内，类名为special的标签*/ a.special{}子选择器
子选择器只能选择到儿子这一代，例如
p>span { color: orangered; }并集选择器
并集选择器的规则是用逗号隔开，例如
/* 添加相同的颜色属性*/ .box,p,h3,.phone{ color:red; }padding的简写
```css div{ /上下左右的内边距都是20px/ padding:20px; }
div{ /上下20px，左右30px，顺序不可变/ padding:20px 30px; }
div{ /上下20px，左10px,右30px,顺序为上右下左，不可变/ padding:20px 30px 20px 10px; }
div{ /上20px，下30px，左右10px,顺序也是上右下左，因为左右顺序一样所以省略了左/ padding:20px 10px 30px; }
<a name="faRl3"></a>
### box-sizing-规定如何计算一个元素的总宽高
1. content-box(默认)
计算公式：
> width = 内容的宽度;
> height = 内容的高度；
2. border-box
计算公式：
> width = 内容的宽度 + padding + border;
> height = 内容的高度 + padding + border；
<a name="P7ch8"></a>
### box-shadow 阴影
阴影的实现原理可以看作是在矩形下面有一个重叠的，同样大小的矩形，如果它在X轴、Y轴上移动就会有阴影的效果。
- X偏移量：在X轴上移动，向右为正
- Y偏移量：在Y轴上移动，向下为正
- 阴影模糊半径：边线的清晰度
- 阴影扩散半径：向外伸展
- 阴影颜色：矩形下面的矩形的背景色
```css
.box{
width: 200px;
height: 200px;
border:1px solid #c4c4c4;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 15px;
}
行内元素和块元素之间的转换
块元素默认的display属性值是block； 行内元素默认的display属性值是inline；
行内转块
<span class="demo"> 这是一个span标签 </span>.demo{ /*将span标签转换成块元素*/ display: block; width: 300px; height: 100px; background-color: #FFF2CC }块转行内
<div class="demo"> 这是一个span标签 </div>.demo{ /*将div标签转换成行内元素*/ display: inline; /* 转换成行内元素以后，宽、高的设置就会失效，即使我们仍然设置了它们 */ width: 300px; height: 100px; /* 背景颜色也不会是300*100范围，而是文字有多少面积，背景颜色就又多少面积 */ background-color: #FFF2CC }z-index
非static元素的z-index的值为0
- z-index的值越大，越在最上面，离观察者越近
- 相同z-index值，在HTML中的元素越靠后，则越在最上面
如果是同样的z-index值，想让某个元素在最上面，则修改其z-index值大于0
/*h1会被固定且在滚动屏幕时不会被其他元素覆盖*/ h1 { position: fixed; left: 30px; top: 30px; z-index: 1; color: yellowgreen; }sticky - 粘性定位
如：知乎
元素居中
水平居中
如果是行内元素，可以在父容器里使用
text-algin:center;如果是块状元素，可以在子容器里使用
margin:0 auto;注意要设置width。如果不是块状，可以用display:block;设置为块状。垂直居中
如果是文字，可以使用
line-height = height;- 更多时候使用
margin-top,让元素上下居中。 -
一个模态框的完整例子
```html <!DOCTYPE html>
```css
body {
/*去除默认的样式*/
padding: 0;
margin: 0;
background-color: #f5f5f5;
}
nav {
position: fixed;
width: 100%;
height: 68px;
border: 1px solid #f4f4f4;
background-color: #fff;
}
img {
width: 100%;
}
main {
padding-top: 68px; /*1*/
}
.logo {
float: left;
width: 100px;
height: 36px;
margin-left: 30px;
margin-top: 16px;
}
.avatar {
float: right;
width: 36px;
height: 36px;
margin-right: 30px;
margin-top: 17px;
border-radius: 50%;
}
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.modal {
position: fixed;
left: 50%;
top: 50%;
/*注意一下这里，设置了left和top为50%后，模态框偏右下，故需要偏移其宽高的一半，才居中*/
margin-left: -150px;
margin-top: -75px;
background-color: #fff;
/* 设置长宽 */
width: 300px;
height: 150px;
/* 设置圆角20px */
border-radius: 20px;
}
.modal > img {
display: block;
width: 200px;
margin: 39px auto;
}
去掉浏览器的默认样式
html,
body {
height: 100%;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
/* 去掉前面的圆点*/
li {
list-style: none;
}
/*标题都要去掉*/
h1,
h2 {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
/*去掉链接的下划线*/
a{
text-decoration:none;
}
背景
设置渐变色 - linear-gradient
- 渐变方向
- 渐变位置
背景图片
背景位置
background合并写法
.box {
width: 350px;
height: 250px;
border: 1px solid #e8e8e8;
font-size: 30px;
font-weight: bold;
color: yellowgreen;
background-image: url(https://style.youkeda.com/img/ykd-components/logo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
上面的写法有些繁琐，如下，可以在background后面写多个属性，没有则置空。
合并后，如下
.box {
width: 350px;
height: 250px;
border: 1px solid #e8e8e8;
font-size: 30px;
font-weight: bold;
color: yellowgreen;
background: url(https://style.youkeda.com/img/ykd-components/logo.png)
no-repeat center / contain;
}
若有收获，就点个赞吧
0 人点赞
