Web前端之浅谈CSS

  • CSS
    • 什么是CSS？
    • CSS的三种引用方式
    • CSS常用选择器介绍
    • 选择器权重
    • 字体属性
    • 文本属性
    • 元素分类
        • display属性:
      • 块状元素
      • 行内元素
      • 行内块元素
    • 盒模型
      • 内边距padding
      • 边框border
      • 外边距margin
        • 清除某些HTML元素的默认样式
        • 盒子居中显示
    • CSS布局之浮动（float）
      • 浮动的破坏性
      • BFC
    • 定位
      • 静态定位
      • 相对定位
      • 绝对定位
      • 固定定位
        • 解决压盖现象
    • CSS背景属性
      • 制作圆、圆环以及半圆
    • 使网页中元素产生阴影效果
    • 网页常见布局方案
        • 单列布局
        • 多列布局
      • 网页中常见问题介绍
    • 行内元素与块级元素水平垂直居中

CSS

什么是CSS？

css， cascading style sheets 层叠样式表。
它用来控制网页样式，并允许将样式代码与网页内容分离的一种标记性语言。简单地说：css的引入是为了使得HTML语言能够更好地适应页面的美工设计。

  • css的优点： ●节省时间 ●页面加载速度更快 ●易于维护 ●多设备兼容性

CSS的三种引用方式

  1. 内联式：缺点是代码重复，造成整个文档体积变大从而不利于维护、不符合结构与样式分离规范。
<p style="color:red;">文本颜色</p>
  1. 嵌入式： 缺点是代码复用不方便，初步实现分离，不同页面若公用就会不方便。
<style type="text/css">/* css样式：选择符（如span）和声明（属性名和属性值）：{}内容构成 */span{font-size: 100px;color: green;font-weight: bold;}</style>
  1. 外部式（推荐）： 优点是利于后期维护 可重复使用。因为link 会产生一点额外请求，但是现在的html可以抹平这个小缺点。
在<head>中加上<link rel="stylesheet" type="text/css" href="css/test.css">
再建一个test.css文件：
h2{color: blue;font-size: 100px;font-weight: bold;
}

●三种方法优先级：内联式>嵌入式>外部式 （嵌入式大于外部式是因为浏览器解析代码是从上往下解析的，比较的是执行先后问题，前提link在style的后面）

CSS常用选择器介绍

选择器样式：
♦语法: 选择符{属性:值;}
♦作用:选中页面上的元素(标签),设置对应的样式一基础选择器
一、基础选择器

  • 标签（元素）选择器
    ♦html中所有标签。
    ♦ 选择器选择的是页面中共有的属性进行设置。
<h2>标签选择器</h2>
h2
{color: blue;font-size: 100px;font-weight: bold;
}
  • 类（class）选择器
    ♦class=“xx英语单词”、active title等。
    ♦一个标签中可携带多个类。
    ♦任何标签都可以携带类。
    ♦一定要有"归类的概念,公共类的想法”。选中的页面元素,设置相同的属性
<h3 class="active title">木子洋</h3>
/*类选择器*/
.active{color:green;
}
.title{font-size: 35px;
}
  • id（身份证号）选择器
    ♦id=“xx”，任何元素都可以设置id
    ♦id是唯一的, 并且不能重复,表示选中的是有特性的元素
<h3 id="container">木子洋</h3>
/*id选择器*/
#container{color:red;
}

二、高级选择器

  • 后代选择器(爸爸的儿子,孙子…)

  • 子代选择器(亲儿子)

  • 组合选择器

例如：h3,span{color:brown;font-size:25px;}
  • 交集选择器
html中：
<div><h2 class="active">你看看</h2></div>
css中：
h2{color: red;
}
.active{font-weight: lighter;
}
h2.active{font-size: 55px;
}
  • 伪类选择器
/*爱恨准则 先爱再恨LoVe HAte*/
/*没有被访问过a的状态*/
a：link{color:red;}
/*被访问过a的状态*/
a:visited{color:purple;}
/*鼠标悬浮时的状态*/
a:hover{color:pink;}
/*鼠标按住时a的状态*/
a:active{color:blue;
}

注意：hover可以应用于任何的元素

  • css继承性：不管嵌套多少层都可以被继承。 检查方法：打开网页源码，高亮状态代表可以被继承下来

选择器权重

●内联样式的权重为1000
●id选择器的权重为100
●类选择器的权重为10
●元素选择器的权重为1
●权重计算永不进位
注意：继承来的属性 它的权重非常低接近于0

  • !important:权重很大，常用它这是一个不好的习惯。当面对很多嵌套繁琐的选择器代码时可以一用。

字体属性

  • 字体 font- family:
    “微软雅黑” , “宋体” ,…;
    可放置多个字体，后面的都是备选。

  • 字体大小 font-size:
    20px; 像素单位:px,em,rem
    px:绝对单位。一旦设置 了值,不管网页如何变化始终如一
    em:相对单位。当前某块区域的字体大小20px,比如给p标签设置了20px,那么1em= 20px;
    rem :相对单位主要应用于移动端

  • 字体颜色 color: red
    颜色表示法:
    单词表示法red green yellow purple.
    rgb( )表示法
    rgba() a:alpha 表示透明度
    十六进制表示法
    #ff6700

  • 字体样式 font-style
    normal :默认的字体
    italic:斜体

  • 字体粗细 font- weight:
    bold:粗的字体
    100~900 400表示默认

文本属性

  • 文本修饰 text-decoration
    underline下划线
    none无线（默认）
    overline.上划线
    line-through删除线

  • 文本缩进 text- indent
    单位建议使用em

  • 行高 行与行之间的距离 line- height
    px,em,rem

  • line-height：行间距，行高一定要大于你的字体大小
    letter-spacing：字间距，只对中文起作用
    word-spacing：字间距，对英文单词起作用

  • 文本对齐方式 text-align
    left（默认）
    right
    center使用最多

元素分类

display属性:

字面意思就是显示，主要是控制元素显示的方式，比如说是否显示、显示的元素的状态、特征是什么等等

块状元素

display:bloock;

<div> <ul> <ol> <p> <h> <table> <form>等等
块级元素特点
◆独占一行
◆>可以设置宽高，如果不设置宽度，默认是父标签的100%宽度

行内元素

display:inline

   <a> <span> <em> <strong> <lable>等等

行内元素特点
◆在一-行内显示
◆不能设置宽高，默认的宽高为文本内容占据的宽高

行内块元素

display:inline-block;

   <input> <i m g>等等

行内块元素特点
◆在一行内显示
◆可以设置宽高

盒模型

什么是盒模型？盒模型（css model）这一术语用来设计和布局时使用。所有的HTML元素可以看作盒子。它的属性包括外边距、边框、内边距和实际内容。

内边距padding

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

               /*上下左右*//*padding-top: 40px;padding-left: 40px;padding-right: 40px;padding-bottom: 40px;*/padding: 20px 40px;/*20表示上下方向，40表示左右方向*/padding: 10px 20px 30px;/*上 左右 下*/padding: 10px 20px 30px 40px;/*表示上 右 下 左方向的padding值*/

可能的值：

值 描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

边框border

border 简写属性在一个声明设置所有的边框属性。三要素：粗细 样式 颜色
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
样式：solid dotted double dashed。
可能的值：

值 描述
border-width 规定边框的宽度。
lborder-style 规定边框的样式。
border-color 规定边框的颜色。
inherit 规定应该从父元素继承 border 属性的设置。

外边距margin

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
可能的值：

值 描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

外边距塌陷问题：margin垂直方向上会出现外边距合并（小的值合到大的值里面去意思是大的值会覆盖小的）。为了避免这个问题所以对于两个相邻盒子，只设置一个盒子的垂直方向上的外边距。

清除某些HTML元素的默认样式

reset.css代码网址

盒子居中显示

CSS布局之浮动（float）

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

◆浮动的背景
◆浮动属性

◆浮动的现象:
1.文字环绕
2.脱离了标准文档流
3.浮动元素互相贴靠
4.浮动元素有收缩现象

可能的值：

值 描述
left 元素向左浮动。
right right
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

注意：最好不要单独设置一个盒子浮动，要浮动就一起浮动。要不浮动就不去浮动。 设置浮动的盒子会脱离整个文档，就像浮起来一样。
文档流，标准文档流指的是元素在排版布局中是默认，从左往右从上往下一个流式的排列布局。而浮动就是脱标现象。

浮动的破坏性

浮动具有破坏性，导致父元素高度塌陷，也就是浮动撑不起父盒子高度。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。
解决方法：清除浮动

  • 1.给父盒子设置固定高度 缺点：使用不灵活 后期不易维护 应用：网页中盒子固定高度区域，比如固定的导航栏

  • 2.内墙法 规则：在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both; 缺点：结构冗余

  • 3.伪元素（选择器）清除，想在哪清除就在哪加上clearfix
    ::after

.clearfix::after{content: '';display: block;}
  • 4.overflow：hidden；
.top_bar{height: 200px;border: 2px solid pink;overflow: hidden;}
BFC

一、 BFC是什么东东
了解BFC前先一了 解一下Box和Formatting Context
( 1） B: BOX即盒子,页面的基本构成元素。分为inline、
( 2 ) FC: Formatting Context是W3C的规范中的一 种概念。它是页面中的一 块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

常见的Formatting Context有Block fomatting context (简称BFC )和Inline formatting context (简称IFC)

BFC定义
BFC( Block formatting context)
直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block- level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float元素重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算。

二、哪些元素会生成BFC

1.根元素

2.float属性不为none

3.posi tion为absolute或fixed

4.display为inline-block

5.overflow不为visible -->

定位

静态定位

position：static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  理解：一般的元素的定位都是静态定位。

不能设置left，top等等（设置了浮动以后也可以设置宽高）

相对定位

position:relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。若仅仅给一个标准文档流下的盒子设置相对定位，那么它与标准文档流下的盒子没有任何区别。但是能设置left，top等，设置了left、top等的值之后以原来的位置为参考点进行移动。

  • 特点：不脱离标准文档流，可以调整元素参考点。
  • 参考点：以原来的位置为参考点。

绝对定位

position:absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • 特点：1.脱离标准文档流，不在页面上占位置。
               2.层级提高，压盖现象。后来的会覆盖前面的。
  • 参考点：单独给一个盒子设置绝对定位，以根元素页面左上角为参考点。
  • 相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面上根元素左上角进行定位。
  • 网站中的实战应用：“子绝父相”

tips：cursor:游标，鼠标cursor: pointer;时，鼠标悬浮到这时就会变成小手。

固定定位

position:fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

  • 特点：1.脱离标准文档流，有压盖现象
               2.一旦设置固定定位，在页面中滚动网页，固定不变。

  • 参考点：以浏览器的左上角为参考点。

  • 应用：小广告，回到顶部，回到导航栏等等。

解决压盖现象

使用z-index（数字越大表示层级越高），可以调整。只能应用在定位的元素之上。其在嵌套结构中，看的都是父级的层级。

img{position:absolute;left:0px;top:0px;z-index:-1;}
值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

CSS背景属性

  • background-image，背景图片。默认情况下是横向和纵向平铺
background-image: url(images/yang.jpg);
  • background-repet，平铺方式。默认都平铺，no-repet不平铺（应用最多），repet-x只横向平铺，repet-y只纵向平铺。
background-repeat: no-repeat;
  • background-position，背景定位。调整背景图的位置。
    1.background-position: 50px 100px;
    background-position-x: 100px;
    background-position-y: 200px;
    2.关键字：top right left bottom center
    组合起来一共有九种位置。
         background-position: 50px 100px;background-position-x: 100px;background-position-y: 200px;background-position: top center;
  • background-size：控制背景图大小。background-size:24px597px ;宽度 高度
    百分比：0% 50% 100%
    水平百分比的值=容器宽度的百分比-背景图片宽度百分比
background-position: 20% 50%;
background-position: 176px 582px;

制作圆、圆环以及半圆

利用border属性的圆角设置：border-radius
border-radius: 5px（左上和右下角） 30px（右上和左下角）;
border-radius:1px（左上） 5px（右上和左下） 30px（右下）;
border-top-left-radius: 15px;也可以单独设置一个角的。
border-top-left-radius: 15px 30px;表示水平方向圆角半径是15，垂直方向圆角半径是30，二者不一致就不像一个圆角了。

width: 200px;
height: 200px;
background-color: pink;
border-radius:2px  5px 30px;
border-radius: 5%;

以上代码实现效果：

实现圆：border-radius：50%;此时变成了一个圆。
实现圆环：在后面加个 border:5px solid gold;
实现半圆：

width: 200px; height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;

使网页中元素产生阴影效果

box-shadow
box-shadow有五个值
第一个表示阴影的水平偏移方向。
第二个表示阴影的垂直偏移方向（第一二个都可正可负 第一个值为正则阴影往右边偏移 为负则反之。第二个值为正则阴影往下偏移 为负则反之）
第三个表示阴影的模糊程度，数值越大表示模糊程度越深。
第四个是颜色。
第五个默认是outset，表示阴影在外，而inset表示内阴影。

.shadow{position: relative;width: 200px;height: 200px;background-color: seagreen;box-shadow: 20px 10px 30px pink;}

以上代码实现效果：

网页常见布局方案

单列布局

常见单列布局有header与footer等宽,content略窄的单列布局

.header{width: 100%;height: 60px;line-height: 60px;text-align: center;background-color:black;}.container{width: 1200px;margin:0 auto;}.header .container{height: 60px;background-color: pink;}.wrap{width: 100%;height: 100%;}.wrap .container{height: 100%;/*background-color: seagreen;*/}.wrap .left{width: 10%;height: 100%;float: left;background-color: yellowgreen;}.wrap .right{width: 90%;height: 100%;float: right;background-color: olive;}.footer{width: 100%;height: 100px;}.footer .container{height: 100px;background-color: gold;}

以上代码实现效果：

多列布局
在上面代码的基础上加上
html,body{margin:0;height:85%;}.wrap .center{height: 100%;background-color: #72D8C0;margin:0 130px;}改为.wrap .right{width:10%;height: 100%;float: right;background-color: olive;}

以上代码实现效果：

网页中常见问题介绍

1.css规范命名大全http://www.divcss5.com/jiqiao/j4.shtml

2.项目的目录规范

3.确定错误发生的位置
通过删除标签块的方式来确定错误发生的位置。

行内元素与块级元素水平垂直居中

  • 行内元素水平垂直： display: table-cell;让我们的div呈现一个单元格的显示方式，相当于一个td
.box{width: 200px;height: 200px;background-color: #FCDBE0;color: #DEAB9B;text-align: center;/*line-height: 200px;*/display: table-cell;vertical-align: middle;}td{width: 100px;height: 100px;background-color: seagreen;text-align: center;/*vertical-align: top;*/}

vertical-align: middle;垂直方向-排列方式
以上代码实现效果：

  • 块级元素水平垂直居中方法一 position+margin
.box{width: 200px;height: 200px;background-color: #F3ED76;/*position: relative;*/display: table-cell;vertical-align: middle;text-align: center;}.child{width: 100px;height: 100px;background-color: #FDB0BC;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}

  • 块级元素水平垂直居中方法二 table-cell
td{width: 100px;height: 100px;background-color:#7FEBB1;vertical-align: middle;text-align: center;}span{display: inline-block;width: 50px;height:50px;background-color: pink;line-height: 50px;}

  • 块级元素水平垂直居中方法三 纯定位计算
.wrap{width: 200px;height: 200px;background-color: #D5BAF7;position: relative;}.xiongda{width: 100px;height: 100px;background-color: #D5F8C8;position: absolute;top:50%;left: 50%;margin-left: -50px;margin-top: -50px; }

Web前端之浅谈css相关推荐

  1. 大型项目前端架构浅谈（8000字原创首发）

    大型项目前端架构浅谈 目录: 1.综合 1.1.使用场景 1.2.核心思想 1.3.切入角度 1.4.其他 2.基础层设计 2.1.自建Gitlab 2.2.版本管理 2.3.自动编译发布Jenkin ...

  2. css中字体下划线样式,css下划线 浅谈css自定义下划线

    使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...

  3. 浅谈CSS Modules以及CSS Modules在Vue.js上的使用

    前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...

  4. 【持续..】WEB前端面试知识梳理 - CSS部分

    传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分 最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...

  5. html css 命名规范,浅谈css命名规则(新手必看)

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  6. html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型 今天学习了 - phpStudy...

    浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...

  7. css inport作用,浅谈css和@import区别及用法详解

    下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...

  8. Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结

    内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第24章  JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...

  9. php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...

    浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...

最新文章

  1. php 返回一个json对象,PHP给前端返回一个JSON对象的实例讲解
  2. 实践--课程表（仿超级课程表展示课表）
  3. MyEclipse6.0下代码提示（alt+/）无法使用的解决方法
  4. python discuz搜索api_Python + Bottle + 谷歌搜索Api 实现简单搜索引擎
  5. mug网络用语_下面这些短语你尽管翻译，全对算我输！
  6. matlab 功率谱密度 汉宁窗_如何理解随机振动的功率谱密度？
  7. 【OpenCV 例程200篇】100. 自适应局部降噪滤波器
  8. 数字金融欺诈行为名词表
  9. WCF透明代理类，动态调用，支持async/await
  10. 基于c语言的学生成绩管理系统论文,C语言学生成绩管理系统论文
  11. 蓝桥杯——2015年C++A组第3题：奇妙的数字【枚举】
  12. 四轴飞控DIY Mark4 - RTH/GPS Rescure
  13. Denoise: from image to point cloud
  14. python立即关机,Python实现自动关机
  15. elasticsearch query里面的slop选项
  16. 二分查找算法python实现_Python实现-二分查找算法（3种方法）
  17. H.264 NALU分隔Annex B和avcC
  18. 字符串转化int类型（整数）
  19. 阿里妹子，17分钟，机智化解一场重大宕机故障！
  20. vue创建项目解除git关联

热门文章

  1. iOS 9，为前端世界都带来了些什么？「译」
  2. 开关电源001--时间常数
  3. 饮食健康会促进心理健康
  4. 百余名人辞世,刚过去的2016是被诅咒的一年吗?MIT数据分析预测这只是个开始……...
  5. 【题解】洛谷P1914 小书童——密码 c++
  6. 计算税率c语言编写程序,C语言编写一个计算个人所得税的程序，要求输入收入金额，能够输...
  7. sklearn中的线性回归
  8. 开源网络风云变幻，看各家爱恨情仇
  9. 测试内容总结-测试分类
  10. 免费网站源码分享平台 有哪些好的源码网站