码迷,mamicode.com
首页 > Web开发 > 详细

个人css公用属性

时间:2019-08-24 18:31:21      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:协议   范围   span   显示器   兼容   图片   Fix   数字   一点   

在我们写多个网页的时候,会发现总会遇到很多相同的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>西施</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</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) { … }
————————————————
版权声明:本文为CSDN博主「董豪强」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u012730137/article/details/78567391

 

 20个css使用小技巧:https://www.cnblogs.com/zhengzhigang/p/8178132.html

 

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 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

转载自:https://www.w3school.com.cn/css/css_jianjie.asp




个人css公用属性

标签:协议   范围   span   显示器   兼容   图片   Fix   数字   一点   

原文地址:https://www.cnblogs.com/FD-1909/p/11405330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!