css 选择器、元素默认宽度、media screen
@media screen and (min-width:800px){
.a{
background: url('../image/banner/banner1.jpg') no-repeat left top;
}
}
max-width:定义输出设备中的页面最大可见区域宽度 宽度小于800px里面的值才会生效
min-width:定义输出设备中的页面最小可见区域宽度 宽度大于800px里面的值才会生效
块元素(如div等)宽度默认是100% 既为父元素宽度的 100%.
body的默认宽度 除去margin等也是html父元素的100%
html的默认宽度 时浏览设备窗口的宽度
@media all and (orientation:landscape){ }横屏模式下
想问下如果在宽度小于800px的时候打开,这时候背.a不会加载图片
@media all and (orientation:portrait){ }竖屏模式下
选择器:
button[lichihua] 选取有lichihua的自定义属性的button标签元素
<button lichihua="disabled">lichihua</button>
button[disabled] 选取有disabled属性的button标签元素
<button disabled="disabled">lichihua</button>
input[type="submit"][disabled] 选取type="submit"并且有disabled属性的input标签元素
<input type="submit" disabled="disabled" name="" value="确定">
input.form-submit.disabled(拥有form-submit和disabled类的input)注意 input.form-submit这里的input和点之间没有空格!!!!
input[type="submit"].disabled (拥有disabled类并且type属性为submit的input)
input.form-submit[disabled] (拥有form-submit类并且拥有disabled属性的input)
input[type="submit"][disabled] (type属性为submit 并且拥有disabled属性的input)
<input type="submit" class="form-submit disabled" disabled="disabled" name="" id="editgroup" value="编辑角色组">
1 AlT+R : 启用正则匹配
2 ALT+C : 启用区分大小写
3 ALT+W : 启用整个字
4 循环查找
删除当前行 Ctrl+Shift+K
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+C 复制
Ctrl+M 光标移动到括号里的开始或者结束位置: 比如trim(|'str|'|) 光标会从蓝色的跳到红色的这两个位置
Ctrl+Enter 下一行(当前行后插入新的一行)
Ctrl+Enter 上一行(当前行前插入新的一行)
Ctrl+Shift+M 选择括号(){}里的内容:
ctrl+shift+d 如果你已经选中了文本,它会复制你的选中项。否则,把光标放在行上,会复制整行快速复制光标所在的一整行,并复制到该行之前。
光标定位到某一行-》ctrl+shift+↑↓,上下交换一行。
display和visibility属性差别
visibility="visible|hidden",visible显示,hidden隐藏。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
display:inline|block|none
inline:行元素 兄弟标签不换行
block:块元素,每个带有block的元素各占一行(换行)
还有个hidden是html的属性不是css他表示域浏览器不相关一般用在表单交互上如input
transition: 过渡的css属性[必须] 过渡效果总时间[必须] 过渡曲线 效果开始前等待的时间;
用户不能鼠标左键选择文本
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;/*不能选择文字*/
元素周围的一条线,位于边框边缘的外围不占空间
outline:none;
规定边框边缘之外 15 像素处的轮廓
outline-offset:0;
用户不能鼠标左键选择文本
Flex布局
-webkit-box-flex: auto;
-moz-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
box-sizing
box-sizing: content-box|border-box|inherit:
c传统的css盒子:padding
+ border
+ width
= 盒子的宽度
设置成box-sizing: content-box