css 选择器、元素默认宽度、media screen

时间:2023-03-10 00:46:10
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="编辑角色组">

CSS3中,合理的使用通配符,可以大大提高效率,以下为测试示例。
“^”开头字母匹配;“$”结尾字符匹配;“*”包含字符匹配
对于类似下面的样式:可以用通配符
#name_1{margin-top:10px}
#name_2{margin-top:10px}
#name_3{margin-top:10px}
#name_4{margin-top:10px},
可写作[id^="name_"]{margin-top:10px}

css  选择器、元素默认宽度、media screen

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