css
Flex 布局
Flex 是 Flexible Box 的缩写，以为弹性布局，为盒装模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局
行内元素也可以使用 Flex 布局：display : inline-flex
Webkit 内核的浏览器，必须加上 -webkit 前缀：display : -webkit-flex
设置 Flex 布局之后，子元素的 float、clear、vertical-align 属性将失效
容器的属性
flex-direction : (row) row | row-reverse | column | column-reverse
flex-wrap : (nowrap) nowrap | wrap | wrap-reverse
flex-flow : <flex-direction> || <flex_wrap>
justify-content: (flex-start) flex-start | flex-end | center | space-between | space-around
align-items: (stretch) flex-start | flex-end | center | baseline | stretch
align-content: (stretch) flex-start | flex-end | center | space-between | space-around | stretch
项目的属性
order: (0)
flex-grow: (0)
flex-shrink (1)
flex-basis: (auto)
flex : (none) <flex-grow> || <flex-shrink> || <flex_basis> (auto : 1 1 auto; none: 0 0 auto;)
align-self: (auto) auto | flex-start | flex-end | center | baseline | stretch
(align-items 的覆盖属性)
2020-03-20
font-family: -apple-system-font,"Microsoft YaHei","微软雅黑","黑体",Arial;
-apple-system-font 默认苹果字体
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust 设置移动端随设备大小的字体
font: 12px/1.5 Arial line-height=12*1.5=18px
letter-spacing: .034em 字间距
color: #333 设置非纯黑字体
font-weight: 400 字体加粗，非blod
* { } 通配符，指所有html标签
去掉点击元素后出现的边框
button:focus {
outline: none；
}
但是在Firefox下，对于类型为button的元素，即使设置outline，也还是会出现虚线。
input::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border: 0;
}
[hidden] { display:none; }
button[disabled] { }
input[type="text"] { }
[src][target] { }
div#video {}
div.title {}
.title:before { }
[class^='span'] <div class="span1" />
[class$='item'] <div class="firstitem" />
[class*='span'] <div class="colspan1" />
[class|='col'] <div class="col-1" />
[class~="glyphicon"] <div class="glyphicon glyphicon-plus" />
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
定义span系列类,用*匹配:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
最右边的元素右对齐:
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}
html实现, 最后一个元素右对齐:
<span class="span3">demo</span>
<span class="span3">demo</span>
<span class="span3">demo</span>
<span class="span3 pull-right">demo</span>
font-awesome原理
bootstrap中定义字体图标：
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before {
content: "\2b";
}
fontello字体图标实现原理:
html实现，为字体库中的编号,相当于普通字库中的字符ASCII编码
<div class="the-icons span3" title="Code: 0xe800">
<i class="demo-icon icon-music"></i>
<span class="i-name">icon-music</span><span class="i-code">0xe800</span>
</div>
定义字体fontello
<style>
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?9770849');
src: url('./font/fontello.eot?9770849#iefix') format('embedded-opentype'),
url('./font/fontello.woff?9770849') format('woff'),
url('./font/fontello.ttf?9770849') format('truetype'),
url('./font/fontello.svg?9770849#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.demo-icon
{
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* You can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
</style>
2020-03-03
bootstrap data-toggle
data-toggle和data-target就是Bootstrap框架中自定义的HTML标签的属性。 data-toggle 告诉JS需要对按钮做什么。 data-target 指示：需要切换到哪一个元素(目标) data-toggle选项触发的事件： Collapse 表示将页面区域折叠起来 modal, 模态框 popover,弹出框,如需激活弹出框，用户只需把鼠标悬停在元素上即可 tooltips,提示工具插件根据需求生成内容和标记 tag, 标签页 当设置data-toggle="link"和data-target="class"之后，bootstrap.js会使用这些值覆盖超链接的默认属性。 <noscript> <a href="link.html">LINK</a> </noscript>
2018-07-10
显示竖滚动条，隐藏横滚动条
html {overflow-x: hidden; overflow-y: auto;{
重新字义滚动条
*{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
2018-03-10
特殊的定位元素
偶数字号相对更容易和 web 设计的其他部分构成比例关系 使用奇数号字体不好的地方是，文本段落无法对齐 通过document.write插入<script></script>元素会自动执行其中的脚本； 大多数浏览器中，通过innerHTML插入<script></script>元素并不会执行其中的脚本 innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。 vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。 vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。 例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。 然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。
2017-11-15
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text"> 局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。
html{font-size:16px; padding:10rem;}
当使用em单位时，像素值将是em值乘以使用em单位的当前元素的字体大小。
.container {font-size:16px; padding-top:10em;}
不要在多列布局中使用 em 或 rem ,改用%。
设计组件比如按钮，菜单。 当你修改字体大小的时候，你希望整个组件都适当缩放。
使用em单位，默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。
display特性
none: 不可见不占据空间(visiblity:hidden 占据空间) inline: 1.与其它元素共享一行， 2.不能更改元素的width,height 3.可用margin-left,margin-right, 不能用margin-top,margin-botton block: 1.独占一行 2.能改变width,height 3.margin值都有效 inline-block: 不独占一行的块元素,结合inline的特点1和block的特点2,3
float、display和position元素
垂直居中方法：
#child {line-height: 200px;}
#parent {line-height: 200px;}
#parent img {vertical-align: middle;}
#parent {position: relative;}
#child {position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%;}
div自动调整高度：float:left;height:auto;
float: 水平方向上的对齐方式
display: 块级元素、行内元素和列表
position: fixed相对于浏览器窗口定位。 z-index定义窗口层次
一、position属性
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
二、float、clear属性
float属性影响元素在水平方向上的对齐方式，类似与多数html元素的align属性。它使得它所包含的元素“流”向左边或右边，这时我们称这个元素为“流动”元素。
clear属性对“流动”元素进行垂直定位，决定是否继续或清除当前的流动方式，类似于html元素br的clear属性，取值有left、right、both、none（默认）。
<!--[if !supportEmptyParas]--> <!--[endif]-->
三、display属性
CSS模型定义了三种类型的显示元素：块级元素、行内元素和列表。display属性允许一个元素的显示类型成为下面四个值中的一个：block，inline，list-item和none。
① none：元素将不会显示出来，并且也不会占据画布空间，这点和设置visibility属性不同。
② block：块级元素。
③ inline：行内元素。
④ list-item：列表元素
5: inline-block
<!--[if !supportEmptyParas]--> <!--[endif]-->
举例：display属性使用。
① “关闭”一个段落，使其不显示出来：
p.remove{display:none;}
② 将一个块级元素（比如段落）转变成行内元素，这样就可以不换行显示！
p{display:inline;}
③ 将一个行内元素转变成块级元素，这样就增加了一个回车（换行）！
em{display:block;}
④ 强制一个元素在一定程度上像列表那样显示：
b{display:list-item;}
效果
设置渐变条：
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
<link rel="apple-touch-icon-precomposed" href="Public/assets/images/favicons/256-256.png">
<link rel="icon" sizes="256x256" href="Public/assets/images/favicons/256-256.png">
<link rel="icon" sizes="32x32" href="Public/assets/images/favicons/32-32.png">
在图片上加文字
.htitle{
height:43px; width:206px;
position:relative; z-index:1;
background-color:#000000; color:#FFFFFF;
text-align:center; line-height:43px;
font-size:20px; font-family:"Microsoft YaHei","微软雅黑","宋体","黑体"; font-weight:700;
margin-top:-43px;
opacity: 0.7;filter:alpha(opacity=70);
}
overflow:hidden 隐藏溢出
还有清除浮动功能。
提到清除浮动，就会想到另外一个CSS样式：clear:both
世界杯大图片效果：
iFeng
<body style="background:#fff url(http://y0.ifengimg.com/2014/02/20/16185732.jpg) no-repeat center 38px;">
SOHU
html{ background:url(http://sports.sohu.com/upload/2014BrazilWorldCup20131114/images/hbg.jpg) repeat-y center top;}
body{ background:url(http://mfiles.sohu.com/sports/2014BrazilWorldCup20131114/images/bg.jpg) no-repeat center top;}
设置渐变条：
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
语法
CSS属性值选择器
h1[class]{color:silver;}
将会作用于任何带class的h1元素，不管class的值是什么。所以
<h1 class="hoopla">Hello</h1>、<h1 class="severe">Serenity</h1>、<h1 class="fancy">Fooling</h1>的h1都会受到这条规则的影响。
*[title] {color:red;}
标题（title）的所有元素变为红色：
<h2 title="Hello world">Hello world</h2>
只对一个链接：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href][title] {color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色：
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
p[class~="important"] {color: red;}
选择 class 属性中包含 important 的元素:
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
img[src|="figure"] {border: 1px solid gray;}
每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg
<img title="Figure 1" src="/i/figure-1.gif" />
<img title="Figure 2" src="/i/figure-2.gif" />
以下为引用的内容：
<div id="test">
<div> <div>a</div> <div>b</div> <div>c</div> </div>
<div> <div>d</div> <div>e</div> </div>
</div>
对上面这段HTML，我们可以分别执行下面两条语句：
alert($('#test>div').length);
alert($('#test div').length);
第一条语句使用了大于号选择符，代表在#test的第一级子元素中查找div元素，在这个例子中得出的结果就是2。
第二条语句使用了空格选择符，代表在#test的所有级别的子元素中查找div元素，在这个例子中得出的结果就是7，既包括第一级子元素的2个，也包括第二级子元素的5个。
--不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
--补充：IE6能识别 *，但不能识别 !important,IE7能识别 *，也能识别!important;FF不能识别 *，但能识别!important;下划线”_“,IE6支持下划线，IE7和firefox均不支持下划线[2]。
table thead, tbody, and tfoot
.btn {
display: inline-block;
*display: inline;
}
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
button.btn.btn-large,
input[type="submit"].btn.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group:first-child {
*margin-left: 0;
}
.btn-group + .btn-group {
margin-left: 5px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
.icon-search {
background-position: -48px 0;
}
input {
*overflow: visible;
line-height: normal;
}
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] ???
input[type="search"]::-webkit-search-decoration,