css基础

作者: 悠哈121 | 来源:发表于2019-01-09 14:26 被阅读0次

1,ie trident 谷歌/o blink 火狐gecko 苹果 webkit
2,服务器与浏览器
服务器与主机是一样的挂在硬盘数量不一定
iis apache web服务器是一个软件提供网页浏览服务的
通过apache解析出来响应报文

image.png

url：网址协议+主机名+域名+端口号+路径
html：hyper text markup language 超文本标记语言
<a>123</a> 将123标记起来是个链接
doctype 声明文档类型告诉浏览器渲染引擎解析html代码
后缀名不能决定文件格式只能决定打开的方式

语义化标签 del/s em/i strong/b ins/u
img 标签只写宽或只写高图片是不会变形的会等比例缩放

target:默认是self 在<head>标签中添加<base target="_blank">默认打开新页面提高效率
符号特殊标记 &lt &gt &copy
无序列表 type square/disc/circle
有序列表 type a 1 i罗马数字 start="3"决定了开始的位置
自定义列表 dl有一个解释可以无数个
<dl><dt>小标题</dt><dd>解释标题</dd></dl> 小米官网帮助中心没有属性
<marquee>滚动类似于跑马灯
xt xhtml trainsition 过度型
xs xhtml strict 严格型
！h5
meta 标签 charset固定网页编码格式 gbk gb2312 台湾big5 utf-8支持100-200国家的语言

image.png

name='keywords' content="java"给网络爬虫爬的关键字给搜索引擎看的
name="description" content="专注Java培训"

image.png
网页重定向 http-equiv="refresh" content="5" http://www.baidu.com 5秒之后网页实现刷新
link 可以更改小图标
get 通过地址栏处理信息
post 通过文件来处理信息
按钮 type="image" 可以提交
重置按钮将信息重置到默认状态
<fieldset>表单进行分组 <legend>分组名称

image.png
h5表单控件
type="url"/type="date"/type="time"/type="email"
type="number"/type="range"滑块控件
复合选择器：两个或两个以上的基础选择器通过不同的方式连接在一起（交集/并集/后代/子代）
交集选择器：
div.box{} 标签是div类是box 或者是类和id的交集
后代选择器:
div .box{} 包含在父关系下就属于后代
子代选择器
div>p{} 直接相邻的子代
并集选择器
div,p{} 通过逗号连接在一起
文本属性和属性连写
font-weight：bold不推荐使用值从100到900
font-family:微软雅黑 unicode【escape】英文
font-style：normal | italic 文字的风格
line-height
连写：建议按照书写顺序文字大小和字体必写
font: 700 italic 16px/20px(字体大小和行高) 微软雅黑
标签分类显示方式
块元素 div h p ul li 宽度会默认继承父盒子宽度
行内元素
span a strong em del ins 在一行显示默认文字16px 宽度为元素撑开的宽度四个文字为64px
内联元素可以设置上下padding但是该padding并不影响布局

image.png

行内块元素表单元素又称内联元素
行内与块级元素互相转换 display：inline inline-block block
text-align:只针对行内行内块元素
样式表之间的层叠:不同的样式作用于同一个标签且样式发生冲突根据i浏览器解析代码的顺序决定(后边代码层叠前面的)
样式的继承:文字的样式块级元素的宽行高
特殊情况 h系列不继承文字大小浏览器渲染内核所致如果父元素20px h1将是2em 40px
a标签不继承文字颜色
样式表的优先级：默认样式<标签选择武器<类选择器<id选择器与层叠性无关<行内样式< !important
优先级权重叠加继承的权重为0
链接伪类
link visited hover active 如果a不写href则超链接不成立
:focus 获取焦点
文本修饰 text-decoration:none/underLine/line-through/
背景属性
background-color
background-image:url("/img.jpg")
background-repeat:no-repeat|repeat-x|repeat-y
background-position:left|right|bottom|top|center
设定水平或垂直的方向的时候另一个方位默认居中
background-attachment: scroll|fixed 背景是否滚动 scroll基于盒子定位 fixed基于浏览器定位如果背景图片超出了盒子将看不见
背景属性的连写
background：red url("1.png") no-repeat bottom fixed;
行高定义
文字的高度为18px 上下各有1px
<div style="font-size:16px">文字</div>
行高是基线与基线之间的距离|文字高度+上下边距
单位<div>123</div>

image.png

单位<div><p>123</p></div>

image.png

一行文字行高和父元素高度一致的时候垂直居中显示

image.png

边框合并
border-collapse:collapse

image.png
继承的盒子父盒子设置了宽高子盒子设置padding并不会撑大父盒子（问题这里是因为产生了bfc超出盒子的部分并不会影响相邻元素的定位相邻元素依然是按照父盒子的位置进行定位）
<div style="width:500px"><p>123</p></div>
p{

height:300px;
background:green;
padding-left:20px/550px超过500之后将会超出盒子父盒子不变
padding-top:20px
}

image.png

image.png
垂直相邻的两个盒子：垂直方向外边距合并
嵌套的盒子：垂直方向外边距塌陷（子盒子设置margin-top:10px会带着父盒子向下10px）解决方法：1.父盒子设置边框或内边距 2.父盒子设置overflow:hidden bfc格式化上下文
bfc主要是帮助理解css布局，创建一个独立的盒子并且盒子里面的子元素不会在布局上影响外面的元素（overflow/position/display/float）
作用
1.防止外边距塌陷 2.包裹浮动元素 3.避免文字环绕
浮动原理
标准流：块元素独占一行行内元素在一行显示直到碰到父级元素边框换行元素自上而下自左而右
三大布局技术（文档流浮动定位）
浮动：行内元素浮动转为行内块元素但是脱标

额外标签清除浮动在最后一个浮动元素后添加标签 clear:left |right|both
清除浮动的原理 1.left不许左边有浮动只能清除自己之前的浮动元素强迫自己下移所以清除浮动的元素放在最后一个位置撑大盒子的原因是因为添加垂直外边距只有块级元素才可以清除浮动的原因是因为行内元素无法设置
margin-top 2.形成新的bfc bfc计算浮动盒子的高度
父盒子：设置 overflow:hidden 如果有内容除了盒子不能使用该方法将会把上边黄色多于区域剪裁
bfc：由于盒子脱离文档流将会重新为该盒子内部形成bfc保证盒子内部的布局

image.png

★.clearfix:after{ clearfix
content:"",
display:block,
height:0;
line-height:0;
visibilty:hidden;
clear:both
}
.clearfix{ zoom:1}

image.png

overflow:属性规定当内容溢出元素框时发生的事情
visible/hidden/scroll/auto如果内容没有出盒子就不会有滚动条
定位 fixed和absolute都会时行内元素转为行内块元素
定位方向：left|right|top|bottom
静态定位：默认文档流，默认值设置left:20px是不会改变位置的
绝对定位：不占据原来位置，相对于浏览器离开位置包含关系的时候父级有定位则相对于父级定位如果父级没有使用定位则相对浏览器定位
z-index0-999
相对定位：相对于自身位置出发并且占据原来的位置不脱标包含关系并不会挤压相邻的盒子所以会出现覆盖问题因为相邻的盒子在文档流中该出现在那个位置 relative的盒子占据原来的位置
固定定位：脱标位置相对于浏览器
定位的盒子居中显示:子绝父相 margin：0 auto会失效因为脱标了 margin:0 auto只能让文档流的盒子居中
position：absolute
left:50%
margin-left:-480px margin是相对于现在定位进行移动

image.png

标签包含规范
div可以包含所有标签
h可以包含p div标签
行内元素尽量包含行内元素，不要包含块元素
规避脱标流
margin-left:auto 让元素从左右往右冲冲不动就停下
margin：0 auto 上下为0 左右一起冲到中间位置

image.png

vertical-align 对行内块元素最敏感设置行内元素相对于该行内元素的对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
默认是 baseline middle|top|bottom
css可见性
overflow | visibility:hidden伪元素会占据原来的位置| display:none
内容移除
text-indent:-1400px a是行内元素没有办法给他缩进把他转化为行内快元素
overflow:hidden
行内元素不能设置上下margin
属性选择器 input[type=text]
html5
max-width:100
min-width:100 最大最小宽度
css3 浏览器支持程度较差需加前缀移动端优于浏览器渐进增强（在保证低版本可以使用的情况下高版本增强）
选择器增强
{div . # div.box div box div>box div,span,p通配符 div+p选中div后面紧跟的第一个p如果第一个是spanspan后面的p将不会显示 div~p选中div后面所有的p就算被分开也不会有影响}
属性选择器通过标签的属性来选择 span[id="aa"]
带有class属性并且以aa开头 div[class ^= "aa"]
带有class属性并且以aa结尾 div[class$="aa"]
带有class属性并且包含aa div[class *="aa"]
伪类选择器表示某一状态标志性符号：结构伪类和状态伪类
状态为类：基于元素当前转来进行选择的，在于用户的交互过程中元素的状态动态变化，元素的根据其状态不同而呈现不同的样式，在一定程度上减少js操作当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去与a相关的target伪类要配合锚点使用表示被激活的状态h2:target{ color:red; font-size:20px}

结构伪类通过结构来进行筛选排序与结构有关
li:first-child{ background:pink} 过程师先找到父盒子在找里面指定的标签
li:last-child{ background:pink}
li:nth-child(10){ bgcolor:pink} nth是序数词
nth-child(odd){} 选中所有的奇数 even是偶数nth-child(n）表示0，1，2，3，4当n小于1是无效的（2n/2n+1前5项-n+5）后5项nth-last-child(-n+5)从后向前选只能写-n+6 选中7的倍数7n
div:empty如果div是空的就会被选中‘

伪元素是对元素中的特定内容进行操作，而不是描述状态，本身基于元素的抽象并不存在于文档结构当中 ::first-letter ::first-line ::before ::after
伪元素：造假的标签伪元素的标志性符号是双冒号 css2并没有伪元素的概念：after在css2 中仍是叫伪类 css3有所升级通过css模拟标签的效果
选中第一个让其字体变大 li::first-letter{ color:red; font-size:30px}
选中第一行 li::first-line
p::selection{ bgcolor:red} 改变选中背景颜色和文字color不能改变盒子大小网页会乱掉

image.png

image.png
text-shadow：1px 1px 1px #333
水平位移垂直位移阴影的模糊程度阴影颜色
文字凹凸是由于光亮照过凸的一面文字成亮的颜色凹的文字成暗的颜色

image.png

image.png
box-sizing:content-box/border-box 只改变盒子的内容大小 width

image.png

image.png
解决ie盒模型与其他浏览器的差异问题解决hover外加边框撑大盒子的问题
content-box:设置盒子内容大小等于width 外加模式 css标准盒子
border-box：设置边框盒子和widh相等 padding向内挤内容内减模式
私有化前缀:解决兼容性问题css3的属性健壮性很差
background:-webkit-linear-gradient(left,red,blue)
边框
边框圆角
border-radius :50%百分比会自动计算 50px在不同的像素盒子将呈现不同的形状
5px 5px 5px 5px 从左上顺时针 20px 20px 对角线取值没有的指取对角的值
box-shadow:10px 10px 10px 10px #ccc insert 内阴影
水平垂直引用模糊程度阴影大小颜色

image.png

css3中2d转换3d转换以及动画
2d转换的移动规则和相对定位类似，即无论元素移动哪里，它的原始位置一直被他占据着
2d转换的属性 transfrom transform-origin
2d转换的方法 translate(x,y) scale(x,y) skew(deg,deg) rotate(deg)
3d 中的perspective 属性是搭配 translateZ的近大远小规则变换
transform-style:flat平面|preserve-3d表示3d透视如果使用3d效果该属性是必加的否则使用z轴方向的变换将没效果

image.png

3d轴的正方向是会改变的比如rotateY(90deg)之后 z轴正方向将是右侧 x轴正方向将是垂直屏幕向里如图

image.png

css3中的3d搭配animation 实现正方体旋转

image.png

//过度属性
css3中有两个实现动画的属性 transition和animation
transition：需要搭配事件出发比如hover，animation:立即释放，并且可以设置循环次数，animation可以设置每一帧的变化过和不同的属性而transition只能设置头尾且变化的属性中间过程不能改变
transition: width 2s，background 2s 宽度在两秒内变为200px
transition: all 2s 所有属性默认变化是先快后慢
transition:all 2s linear 1s线性匀速延迟一秒执行
过渡动画属性
trainsition-timing-function linear ease esae-in ease-out ease-in-out先加后减
}
div:hover{
width:200px;
background:blue
}
transform:不会影响标准流特殊情况如果父盒子设置了transform 子盒子定位为fixed行为将会变为absolute
子盒子和宽度设置为100%会将transfrom的宽度纳为参照
用在父盒子上透视效果只是视觉体现也可以用在子盒子上

image.png

导航盒子3d

image.png

动画 animation:move 2s 3 alternate //回来也算一次 linear 1s延迟执行
}

image.png
动画属性

-name -duration -iteration-count -direction -delay
执行动画保持结束的位置与状态
-fill-mode:forwards动画结束的位置/backforwards动画结束时候还要回原来的位置
运动曲线
-timing-function:linear ease-in ease-out ease-in-out
steps(3)分步执行动作分三步三桢执行完毕秒针效果

image.png

flex 布局属性
justify-content: flex-start flext-end center space-between space-around
align-items:stretch flex-start flext-end center baseline
aign-content:stretch flex-start flex-end center space-between space-around 需要搭配flex-wrap使用因为它适用于flex多行的情况align-items它适用于单行
align-self:默认为auto该属性会覆盖align-items,加到伸缩项本身在侧轴方向的展现方式属性同align-items
flex:1自动平分，两个子盒子其中一个设置该属性另一个没设置，设置的盒子将默认填充剩余的部分
flex-wrap:nowrap/wrap wrap-reverse默认所有伸缩项不换行

image.png

flex-flow：flex-direction flex-wrap
flex-flow:colum wrap-reverse
伸缩项 order制定伸缩项的位置默认0 order:1会导致盒子跑到最后面
f'lex-grow将父盒子的剩余空间按比例分配在子盒子上 :加到伸缩项增长比例1：1
flex-shirnk:收缩
flex-basis:400px 当浏览器缩小使盒子的宽度不足以400时才会缩小，且该属性设置后widthj将不起作用
flex:flex-grow 0不增长 shrink 1等比例收缩 basis auto item项的宽度