1,权重计算:
 权重:id  class  标签--->>>顺序不变
 当权重一样时,显示后来设置的
 继承下来的标签,权重为0
 若权重为0,那么谁描述的近,就显示谁
 若权重为0,描述的一样近的时候,回归原始状态(数权重)

2,padding:

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
   
/*上下左右*/
padding: 20px;

3,bordr: 10px solid red;
 border-radius:10px; 设置圆角

4,标准文档流的现象:  空白折叠现象----高矮不齐,底边对齐----自动换行,一行写不满,换行写

5,块级---行内
行内元素:
 与其他行内元素并排;
 不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
 霸占一行,不能与其他任何元素并列;
 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
display:inline  块级转为行内
display: block;  行内转块级
display: inline-block;   转为行内块

6,浮动
四大特性:
  1.浮动的元素脱标
  2.浮动的元素互相贴靠
  3.浮动的元素由"子围"效果
  4.收缩的效果

注意:所有的标签一旦设置浮动,就能够并排,并且都不区分行内、块状元素,都能够设置宽高.
     要浮一起浮,有浮动就要清除浮动.
  若一个盒子浮动,另一个是行内的话不会顶进去,另一个是块级的话会顶进去,原因就是浮动有自围效果.

清除浮动:
  1,给父盒子设置高度-----------不灵活,所以一样不用,万年不变的导航栏可以用
  2,clear:both 
  3,伪元素清除法     .clearfix:after{
         content:".";
         display:block;
         visibility:hidden;
         height:0;
         clear:both;}
  4,overflow:hidden     visible  内容不会被修剪,会呈现在元素框之外。
                              hidden   内容会被修剪,并且其余内容是不可见的。
                              scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
                               auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
                              inherit    规定应该从父元素继承 overflow 属性的值。
BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522  (有时间就 看一下)

7,margin用法:
 塌陷问题:
  两个标准流下兄弟盒子 设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象叫塌陷。
  当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题。
 margin:0 auto;注意点:
  1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;
  2.只有标准流下的盒子 才能使用margin:0 auto;
  当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了
  3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;
  
8,文本属性:
 文本对齐------------------------
  text-align 属性规定元素中的文本的水平对齐方式。
  属性值:none | center | left | right | justify
 文本首行缩进--------------------
  text-indent 属性规定元素首行缩进的距离,单位建议使用em
 文本修饰
  text-decoration属性规定文本修饰的样式
  属性值:none(默认)|underline(下划线)|overline(定义文本上的一条线)|line-through (定义穿过文本下的一条线)
  inherit(继承父元素的text-decoration属性的值。)
 行高
  line-height就是行高的意思,指的就是一行的高度。
8,字体属性:
 字体大小
  font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。
 字体粗细
  font-weight表示设置字体的粗细
  属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细)
  100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值) 
 字体系列
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 
  如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

9,行高:
 line-height
 针对单行文本垂直居中--------
 公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。
 针对多行文本垂直居中--------
 行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
 第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
 第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
   
10,font-family------ https://www.cnblogs.com/majj/p/9040281.html  (马哥博客详解)
  
11, 导航栏示例:
css代码:

{
*{
padding:;
margin:;
} ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外,不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
}

html代码:

{
<div class="nav">
<ul>
<li>
<a href="">58同城</a>
</li>
<li>
<a href="">腾讯</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
}

12, 颜色:
三原色:rgb:红,绿,蓝.  例  rgb(255,255,255)白色      rgb(0,0,0)黑色  
 background-color:rgb(255,0,0,透明度) 
进制表示法:  #ff0000 <<<--->>> #f00  
 扩展:#111---#999 代表各种灰色
 
background-image:表示设置该元素的背景图片,水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式 ,给元素设置padding之后,发现padding的区域也会平铺背景图片。
 repeat
 背景图像将在垂直方向和水平方向重复。
 repeat-x
 背景图像将在水平方向重复。
 repeat-y
 背景图像将在垂直方向重复。
 no-repeat
 背景图像将仅显示一次。
 inherit
 规定应该从父元素继承 background-repeat 属性的设置。 
实例:标头大广告图片居中大图效果----  
 background-image:url("../cms_15337986888589_wGuOE.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
 
精灵抠图神技:
 先设一个div,然后background-image:url()倒入一张图片进行background-repeat设置,div设置为目标图片大小,
 最后通过background-position调节背景图片位置,获得目标图片.
实例:  
  {目标图片大小为 240*186 ,把原图向上移动150px,像左移动190px得到目标图片
  
   *{
    margin: 0;
    padding: 0;
   }
   div{
    background-image: url("./bbI.jpg");
    background-repeat: no-repeat;
    height: 186px;
    width: 240px;
    background-position: -190px -150px;
   }
  
  }
  
13定位:<重点>

position : static   --->>>静态定位
position : relative --->>>相对定位
position : fixed    --->>>固定定位
position : absolute --->>>绝对定位
  
----相对定位:  >>>>一般用于微调元素,当做父相子绝的参考
  ----参考点为原来位置
  ----不要做压盖现象,会留坑(占着茅坑不拉屎)
  ----设置定位后,它的层级大于标准盒子
  ----相对定位的盒子不脱标
  用法--->>>设置本标签为position:relative    用top bottom left right 在本标签做位置调节,他是以本标签原来位置为起点参考移动的.

注:页面与浏览器的区别:
   ----页面:网站的整个页面,比可浏览器大,被内容撑起来的区域
   ----浏览器:打开浏览器的窗口,就电脑屏幕那么大
----绝对定位:
  ----脱标
  ----做压盖现象,层级高
  ----单独设置绝对定位时:
    ----top描述时,参考点为页面的左上角
    ----bottom描述时,参考点为浏览器的左下角
  ----父子盒子嵌套时:
    ----父设为相对定位,子设为绝对定位,子(top bottom left right)会以父盒子的左上角作为参考点.
    ----多个父亲时,子元素以最近的设为相对定位的父盒子的左上角为参考点
  盒子居中:
   >>>>left:50%
   >>>>margin-left:-(一半盒子宽度)px
    
----固定定位:  用top bottom left right做位置调节
  ----脱标
  ----层级提高
  ----参考点为浏览器的左上角

Z-index:
 ----z-index值表示谁压着谁,数值大的压盖数值小的
 ----只有定位的元素才有z-index(固定,绝对,相对都行),浮动元素不能使用
 ----z-index值没有单位,就是一个正整数,默认为0如果值一样,谁写在html后面,谁在上边压盖别人;定位的元素压盖没定位的.
 ----从父现象,父亲怂了,儿子再牛逼也扯淡.
  
补充:outline:none  干掉input外边线
 box-shadow:0 15px 31px rgb(0,0,0,.5)阴影
 做浮动阴影效果时,浮动位置是以原位置为参考的
 
 抖动效果---->>>>先把自己设为相对定位,然后:hover{top:-2px}
  
--------------------------------css完---------------------------------------

前端----css总结的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

  1. Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信

    webview两种实现方法,覆盖onKeyDown()方法 缓存 WebSettings应用注意的几个问题 1.要实现JS代码与Java代码互相通信,需要通过Android的WebView控件,在视图 ...

  2. 【题解】洛谷P3205【HNOI2010】合唱队

    洛谷 P3205:https://www.luogu.org/problemnew/show/P3205 复习区间DPing 思路 把理想队列拆分成 第一个和后面几个 划分成求后面几个的理想队列 最后 ...

  3. HDU 1221 Rectangle and Circle(判断圆和矩形是不是相交)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1221 Rectangle and Circle Time Limit: 2000/1000 MS (J ...

  4. Python中使用list和tuple

    list: Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: 变量classmates ...

  5. 与select2有关的知识点总结

    1.多选下拉框设置提示 var datass = [ { id:0, text: '你好' }, { id:1, text: '好久不见' }, { id:2, text: '好想你' } ]; va ...

  6. BP神经网络—java实现(转载)

    神经网络的结构 神经网络的网络结构由输入层,隐含层,输出层组成.隐含层的个数+输出层的个数=神经网络的层数,也就是说神经网络的层数不包括输入层.下面是一个三层的神经网络,包含了两层隐含层,一个输出层. ...

  7. 姆洋自主研发堆(heap)头文件

    这是姆洋自主研发的heap头文件 将其录入IDE,并保存为heap.h,保存在存放C++头文件的文件夹里(我只知道Dev-C++是Dev-cpp/MinGW64/lib/gcc/x86_64-w64- ...

  8. VM虚拟机网卡LAN区段模拟内网使用教程

    目录   1. 测试环境   2. 设置LAN区段并测试    2.1. 添加LAN区段    2.2. 在虚拟机中设置静态IP地址    2.3. 测试同一LAN区段的主机是否可以联通    2.4 ...

  9. 01 shell编程规范与变量

    前言: 大家对shell脚本应该都不算陌生了,如果突然问你什么是shell脚本?是干什么用的?由什么组成以及怎么使用?变量的概念是什么?作用范围是什么?变量间的算术运算怎么表示?你能很容易答出来吗 本 ...

  10. jquery图片滚动animate.css

    @charset "UTF-8"; /*!Animate.css - http://daneden.me/animateLicensed under the MIT license ...