css学习笔记（更新中）

会飞的巧克力 發表於 2020-2-23 15:27:00

css网页美容师
写于<head>中的<style>
字体设置：{font:font-style font-weight font-size font-family}
选择器：
一、标签选择器
p h1 span div
二、类选择器 
<head>
.自己设定名称{属性一：值  属性二：值；}
<body>  <class="自己设定名称 ">
三、多类名选择器
.one,two,three 先后顺序无关
<div class="one two three">
四、id选择器
#类名称{属性一：值  属性二：值；}
<body>  <class="#类名称">
id选择器就像身份证号码无法重复，而类选择器就像人名可以重复
五、通配符选择器
*{margin:0 padding:0;}
六、伪类选择器
1、链接伪类选择器
.co:hover{color:red;} 鼠标经过
2、结构伪类选择器
li:first-child{}
li:last-child{}
li:nth-child(3){}选择第三个孩子
li:nth-last-child(n){}
CSS注释：
颜色color
行间距line-height
水平居中text-align:center
首行缩进text-indent
字间距letter-spacing
单词间距word-spacing
引入样式表：
行内样式表：控制一行代码
内嵌样式表：控制一个页面
外部样式表：控制整个站点
标签显示模式： 块级元素（block-level）：h1-h6 p div ul ol li
行内元素（inline-level）：span a em 
行内块元素（lnline-block)：容易控制
复合选择器：
并集选择器： .one,p,#text{}进行集体声明
后代选择器：div ul li {color:red}
子元素选择器：.item>ul{} 只变亲儿子，不包含孙子、重孙子
属性选择器：
E{}input中放入属性
伪元素选择器：
.demo 类选择器
:hover伪类选择器
::first-letter 伪元素选择器
背景设置：
background:transparent url() repeat-y rgba(0,0,0,0.3)
一组链接排列
a{text-align=center;水平居中
    helght:50px;
    line-height=50px;行高等于高，垂直居中
    display:inline-block;a换行内块元素
    text-decoration:none;无下划线
<a herf="#">1</a>
<a herf="#">2</a>
CSS三大特性：
一、层叠性长江后浪推前浪
二、继承性文字类可子承父业字体、字号、颜色、行距等
三、优先级 important>行内style声明>#id>.one,:hover>div ul li (不管父级元素多牛逼，被子元素继承时，权重都为0；权重相同考虑优先级）
盒子模型（CSS重点）：
一、边框border：1px solid red；
border-radius:50%；
二、内边距 padding:上右下左
三、外边距 margin:上右下左 
盒子水平居中：margin:0 auto;
文字水平居中：text-align:center;line-height=height;
清除元素的默认内外边距：
*{padding:0;margin:0}
嵌套元素垂直外边距合并：对父级元素加上overflow:hidden
盒子布局稳定性
盒子是由border,width,padding,margin组成，width和height可以用剩余法来做
浮动：float
元素的浮动就是元素脱离标准流的控制移动到其父元素制定位置的过程
display:inline-block div转行内块元素，但中间有空隙
float:left 无空隙
使用建议：1、一行上用一个标准流的盒子固定住2、在固定住的盒子里放浮动的元素，这样浮动的元素就不会乱跑了哈
可以对父级元素闭合浮动，建议在开头就设置
.clearfix:before,clearfix:after{content:'.';display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
定位：和JS打交道，算是难点，多学习。
一、边偏移
top:30px
bottom:50px
left:25px
right:60px
二、定位模式
position:static静态定位（标准流）
position:relative 不脱标相对定位的盒子还在标准流中
position:absolute:完全脱标，不占位置
若父级元素无定位，以浏览器为准
若父级元素有定位，以父级元素为准
子绝父相：父元素相对定位，下面的盒子跑不上来，不会影响布局；同时，儿子也会以父级元素为准，子元素是绝对定位，不占位置
position:fixed;
居中对齐：left:50%;margin-left:-盒子宽度的一半px;
定位小圆点：background:rgba(255,255,255,0.4)背景色半透明；
                     margin:6px 8px小圆点在盒子内部的距离;
                     border-radius:50%;(可参考学成网案例，小圆点制作)
                     
  
来源：https://www.cnblogs.com/stevefish/p/12348807.html

頁: [1]

琼殿技术论坛's Archiver

css学习笔记（更新中）