在我们写多个网页的时候，会发现总会遇到很多相同的css样式，若是每次都要在网页代码中写，会浪费时间，同时也会消耗浏览器和计算机的性能。因此，我个人将我敲代码过程中的经常用到的css样式总结了一下。再用的时候通过link标签引用就可以了。

常用的公用css

一、PC端

1.页面margin（外边距）、padding（内边距）清零。

*{

   margin：0；

  padding：0；

}

原因：

1、默认的块元素有些会自带margin或者padding。

2、body默认就会有8个像素margin，这样设定后可以清除body的margin。

3、清除这些元素的默认margin和padding后我们自定义的css样式才不会有偏差。

4、同时设置margin为0也有为了居中对其的目的。

2.列表去除前面的点和数字。

ul,ol,li{

list-style: none;

}

demo：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

ul,ol,li{

list-style: none;

}

</style>

</head>

<body>

<ul>

<li>西施</li>

<li>王昭君</li>

<li>貂蝉</li>

<li>杨玉环</li>

</ul>

</body>

</html>

3.超链接a标签下划线去除。

a {

text-decoration: none;

}

在很多网站如：https://www.taobao.com/ https://www.jd.com/ 等都可以看到在导航栏的部分，上面的小字都没有下划线，这都是多亏于此样式。

4.页面版心设置。

container {

width: 1024px;

margin:0 auto;

}

应用效果如 京东网站 https://www.jd.com/ 页面两边留有空白.

5.清除浮动效果。

方法一：添加新的元素 、应用 clear：both；

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

clear{clear: both;}

<div class="box">

    <div class="red">1</div>

    <div class="sienna">2</div>

    <div class="blue">3</div>

    <div class="clear"></div>

</div>

方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。

.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/

<body>

<div class="box over-flow">

    <div class="red">1</div>

    <div class="sienna">2</div>

    <div class="blue">3</div>

</div>

</body>

方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

主要推荐使用这种方法清除浮动

.clearfix:after{

    content:"";/*设置内容为空*/

    height:0;/*高度为0*/

    line-height:0;/*行高为0*/

    display:block;/*将文本转为块级元素*/

    visibility:hidden;/*将元素隐藏*/

    clear:both;/*清除浮动*/

}

.clearfix{

    zoom:1;/*为了兼容IE*/

}

<body>

<div class="box clearfix">

    <div class="red">1</div>

    <div class="sienna">2</div>

    <div class="blue">3</div>

</div>

</body>

方法四:使用双伪元素清除浮动

.clearfix:before,.clearfix:after {

     content: "";

     display: block;

     clear: both;

}

.clearfix {

     zoom: 1;

 }
消除浮动的原因：

1、背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

二、移动端

1、列表去除前面的点和数字。

ul,ol,li{

list-style: none;

}

demo：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

ul,ol,li{

list-style: none;

}

</style>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</body>

</html>

2.超链接a标签下划线去除。

a {

text-decoration: none;

}

在很多手机网站如：https://www.taobao.com/ https://www.jd.com/ 等都可以看到在导航栏的部分，上面的小字都没有下划线，这都是多亏于此样式。

3.断点

我们通过媒体查询的形式来进行网页布局，原理就是设置好几个区间范围，当浏览器的宽度符合了条件区间后就执行相应的css代码。

断点的设置即可以根据实际的情况，也可以参照一些框架的设置。

html,body {height:100%;}

@media all and (max-width:320px) {

html {

font-size:12px;

}

}

@media all and (min-width:321px) and (max-width:375px) {

html {

font-size:14px;

}

}

@media all and (min-width:376px) {

html {

font-size:16px;

}

}

Bootstrap移动优先的内体查询断点设置

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） /

@media (min-width: @screen-sm-min) { … }

/ 中等屏幕（桌面显示器，大于等于 992px） /

@media (min-width: @screen-md-min) { … }

/ 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { … }

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

公共属性--几乎去除所有html的默认样式文件下载地址

css的公共属性及原因的更多相关文章

  1. 解决类型“System.Web.UI.UpdatePanel”不具有名为“Gridview”的公共属性,

    类型“system.web.ui.updatepanel” 不具有名为“XXX”的公共属性,其实原因很简单.就是少了一个<ContentTemplate></ContentTempl ...

  2. AJAX - 类型“System.Web.UI.UpdatePanel”不具有名为“FileUpload”的公共属性。

    类型“system.web.ui.updatepanel” 不具有名为“***”的公共属性,其实原因很简单.就是少了一个<ContentTemplate></ContentTempl ...

  3. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  4. CSS的margin属性：详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  6. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  7. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  8. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. MySql 文件导入导出

    1.将表输出到文件 select * FROM zhilianzhaopin4 INTO OUTFILE 'G:/test.csv'      --------输出位置 fields terminat ...

  2. Java程序设计学习笔记（五） — 多线程

    时间:2016-4-15 09:56 --多线程(还有多核编程)     1.进程         进程是一个正在执行中的程序.         每一个进程执行都有一个执行顺序,该顺序是一个执行路径, ...

  3. 前端性能优化(四)——网页加载更快的N种方式

    网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户.除此之外,前端优化得好,还可以为企业节约成本.那么我们应该如何对我们前端的页面进行性能优化呢? ...

  4. linux centos7 read 命令

    2021-08-24 1. 命令简介 read 命令就是读取控制台输入,会将从键盘输入的数据分割成一个个字段依次存储在 parameter[0] .parameter[1] ......,若是没有指定 ...

  5. Linux定时任务（详细）

    Linux定时任务一.首先查看是否安装了crontab[root@master ~]# rpm -qa |grep crontabcrontabs-1.11-6.20121102git.el7.noa ...

  6. Windows内核-7-IRP和派遣函数

    Windows内核-7-IRP和派遣函数 IRP以及派遣函数是Windows中非常重要的概念.IRP 是I/O Request Pocket的简称,意思是I/O操作的请求包,Windows中所有Use ...

  7. Node.js 应用全链路追踪技术——[全链路信息获取]

    全链路追踪技术的两个核心要素分别是 全链路信息获取 和 全链路信息存储展示. Node.js 应用也不例外,这里将分成两篇文章进行介绍:第一篇介绍 Node.js 应用全链路信息获取, 第二篇介绍 N ...

  8. .Net Core 中的选项Options

    .NetCore的配置选项建议结合在一起学习,不了解.NetCore 配置Configuration的同学可以看下我的上一篇文章 [.Net Core配置Configuration源码研究] 由代码开 ...

  9. 剑指 Offer 31. 栈的压入、弹出序列

    剑指 Offer 31. 栈的压入.弹出序列 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如,序列 {1,2,3,4,5} 是某 ...

  10. 20210811 Dove 打扑克,Cicada 与排序,Cicada 拿衣服

    考场 开考感觉 T3 比较可做.T1 看上去不难但毫无思路. 先想了 25min T3,想到一个确定左端点,二分最长的右端点,甚至想到了用猫树维护区间 or and...上厕所回来发现假了,没有单调性 ...