重点:
⭐
🏻清除浮动:overflow:hidden/auto
末尾加clear:both属性的div
小图片居中对齐与文字一样的方法,图片大于文字利用vertical-align:middle;
🏻按钮禁用,this.disabled=true;
🏻禁止链接跳转< a href='javascript:;'>删除
🏻opacity:.5;半透明效果
🏻autocomplete="off"//阻止文本自动填充行为
css是层叠样式表,称为css样式表或级联样式表,作用是设置文本内容(大小,对齐),图片外形(宽高,边框),版面布局和外观显示。
css由两部分组成,选择器以及一条或多条声明,选择器分为基础选择器和复合选择器,基础选择器又分为标签选择器、类选择器、id选择器、通配符选择器
/标签选择器 标签名 { 属性1: 属性值1; }
/类选择器 .red {属性1: 属性值1 }
<div class='red'></div>
/类选择器-多类名
.red { 属性1: 属性值1}
.font35 { 属性1: 属性值1; }
<div class='red font35'></div>
/id选择器,只能调用一次,类似于人的身份证号码
#red {属性1: 属性值1; }
<div id='red'></div>
/通配符选择器,把所有标签统一修改样式 * { 属性1: 属性值1; }
/顺序:
font:font-style(italic) font-weight (700 & 400) font-size/line-height font-family
/* 必须有size和family */
/text-align:left / right / center(水平对齐)
text-decoration:none / underline / overline / line-sthrough
text-indent:(首行缩进)正负像素值/2em; line-height:(文字行与行之间的间距)
css样式: 内部样式表<style>
</style>、
行内样式<p style="color:pink;" 外部样式表: 1.(1.css) <link rel="stylesheet" href="1.css">
/后代选择器 ol li a{}
/子选择器 (必须为亲儿子元素)
.nav > a{}
/并集选择器(多组标签) div,p,.nav li{}
/链接伪类选择器:lvha顺序
a:link(所有未被访问的链接,更改样式)
a:visited(所有已被访问的链接,更改)
a:hover(鼠标指针位于其上的链接)
a:active (活动链接(鼠标按下没弹起的链接))
/ :focus 伪类选择器(把获得光标的input表单元素选取出来)
应用:input:focus{}
html的元素分为块元素和行内元素
/常见块元素:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<form>、<table>、<hr>、<dl>(宽度默认为父级的100%,其中,h和p不要放块级元素,主要放文字)
/常见行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>、
特殊(宽高设置无效,默认为本身内容宽度,a里可以放块级元素)
/常见行内块元素:< img /><input /><td>
转换为块级元素:
1.display:块级block/行内inline/行内块inline-block)
2.设置文字垂直居中,设置line-height
/背景属性:
background-color:transparent/color
background-image:url(1.jpg);
background-repeat:repeat|no-repeat |repeat-x |repeat-y
background-position: x y;(左侧和上侧)
/background:rgba(0, 0, 0, 0.5);
(logo和小图片,大图片背景应用背景图片可调节位置)
background-attchment:scoll(滚动,默认)/fixed(固定)
合并:
background: 颜色,图片,平铺,滚动,位置;
!!!css的三大特性:层叠性、继承性、优先级。
层叠性:是就近原则(相同的选择器) 继承性:子元素可以继承父元素的(text-,font-,line-以及color)行高的继承:font:12px/1.5(1.5是当前元素的1.5倍,是行高)
优先级:继承或*(0000)
元素选择器(0001)
类和伪类选择器(0010)
ID选择器(0100)
行内样式,style=“”(1000)
!impritant(无穷大)
1.继承的权重为0(重点)
2.a链接默认了一个样式蓝色,不会继承父级的颜色。
3.权重叠加:复合选择器会有权重叠加问题,叠加不会进位0001+0001=0002/0010+0001=0011
盒子模型:浮动和定位。
盒子包括border,padding,margin,content
border:width(像素) , style(solid/pushed) , color;
/边框合并:border-collapse:collapse;
1.padding:padding会影响实际盒子大小已有宽高的盒子加padding会撑大盒子,应用padding撑开只有高度的盒子,padding要减去撑大的宽度)
2.行内块元素:即有宽高又在同一行上。
3.如果盒子本身没有指定width/height,则padding不会撑大盒子
4.margin
(应用:1.块级盒子水平居中对齐的方式:指定宽度的盒子margin: 0 auto;)
行内元素和行内块元素方式:给父级添加text-align:center;
♥为了避免塌陷问题(父子元素都有上外边距margin-top时)
解决方法:1.给父元素加边框 2.给父元素加内边距padding:1px; 3.给父级加上overflow:hidden
行内元素尽量只设置左右内外边距,设置上下时先转换为块级/行内块。
圆角边框的设置:
border-radius:宽度/高度的一半
/盒子阴影:box-shadow:10px(左右移动)10px(上下)10px(模糊距离)10px(影子大小)rgba(0,0,0,0.3);
/文字阴影:10px(左右移动)10px(上下)10px模糊距离, rgba(0,0,0,0.3);
传统布局的三种方式:普通流、浮动、定位。
/浮动:块级元素横向排列找浮动(float:left/right) 浮动特性:1. 脱标 2. 不保留原先的位置 3.具有行内块特点
浮动的应用:先创建一个父级盒子,再在父级里创建两个子盒子加浮动。
图片:jpg保存较好,gif可以保存动画和透明背景,png最好,
/定位:让盒子自由的固定在屏幕中某个位置,并且压住其他盒子。(定位等于:定位模式+边偏移){position:static/relative/absolute/fixed;}
relative: 以自己原来的位置移动(并且仍然保留原来位置)
absolute:相对于他的父元素位置移动(否则为文件位置)
(绝对定位不再保留原来位置)
♥子绝父相。
fixed:固定在屏幕中的某个位置,不随滚动而滚动{position:fixed;top:100px;right:100px;} (不占有原先位置)
小技巧: 让盒子固定在版心右侧位置,1.先left:50%;2.margin-left:版心宽度的一半
/sticky粘性定位:占有原先位置,且以可视窗口为参考点,必须添加top等一个值,相当于固定和相对结合,比较添加一个边移量 {z-index:1;} 数值越大 ,盒子越靠上
加了绝对定位盒子不能margin:auto
解决办法:1.left:50%,margin-left:宽度的一半;
2.top:50%;margin-top:高度的一半;
其他:
行内元素添加定位,可设置高度/宽度 2.块级元素加了定位,大小为内容大小 3.绝对(固定定位会压住原来的盒子包括文字)
/元素的显示与隐藏display:none/block
visibility:visible显示/ hidden隐藏(继续占有原来位置)
溢出隐藏:overflow:hidden / (滚动条)scroll/auto
有定位的元素最好不要用
精灵技术:主要针对背景图片使用,sprites(精灵图走不是盒子走) background-position:x往右是正,y往上为正;
字体图标:iconfont(本质是字体)
三角形的做法✓border
鼠标样式:cursor:default/pointer/move/text/not-allowed