- 各个模块命名规范
CSS盒模型详解
常用的多列等高布局
104道 CSS 面试题,助你查漏补缺
值得收藏的 104个 CSS 面试题
55 个提高你 CSS 开发效率的必备片段
html/css 简单的表单实例
前端必看的8个HTML+CSS技巧
一.logo编写规范
HTML代码
h1是hn标签中最重要的标签,一般都个网页只能有一个,所以把logo放在h1标签,爬虫就很容易抓取到logo的信息。
<div class="logo">
<h1>
<a href="#">
<span>标题</span>
</a>
</h1>
</div>
CSS代码
.logo a {
width: 154px;
height: 30px;
display: block;/*因为a元素是行元素,设置宽高没有用,所以要设置成块元素*/
background: coral no-repeat;/*no-repeat的意思是背景图像将仅显示一次。 */
}
.logo a span {
display: none;/*令文字消失*/
}
二.nav导航栏编写规范
HTML代码
<u class="nav">
<li class="list-item">
<a href="">内容1</a>
</li>
<li class="list-item">
<a href="">内容2</a>
</li>
<li class="list-item">
<a href="">内容3</a>
</li>
</u>
CSS代码
* {
margin: 0;
padding: 0;
color: #424242;/*令所有的字体都是标准的黑色*/
font-family: Arial;/*令所有的字体都是标准字体*/
}
.nav {
list-style: none;/*去除li左边小点点的样式*/
}
.nav::after {
content: "";
clear: both;
display: block;
}/*清除浮动效果*/
.nav .list-item {
float: left;
margin: 0 10px;
height: 30px;
border: 1px solid chartreuse;
line-height: 30px;
}
.nav .list-item a {
text-decoration: none;/*去除a元素的下划线*/
font-weight: bold;/*字体加粗*/
height: 30px;/*令a元素占满整个li*/
display: inline-block;/*因为a元素是行元素,所以height不能生效,所以要变成块元素*/
padding: 0 5px;/*给a元素与块元素两边增加距离*/
border-radius: 15px;/*可以给a元素增加圆角效果*/
}/*令鼠标移动到a标签都的效果*/
.nav .list-item a:hover {
background-color: #f40;
color: #fff;
}
效果如下
三.文字溢出处理,背景图片处理
- 文字溢出处理(很多单行文本在开发过程中基本都会使用)
当一个块元素设置宽高以后,当里面的内容装满以后他会溢出来
html代码
<p>溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p>
css代码
p {
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
}
当溢出后,在溢出的容器里面加三行代码(写死的)
p {
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
/*后面这三行代码是写死的,处理文字溢出的效果*/
white-space: nowrap;/*让文本失去换行功能*/
overflow: hidden;/*溢出部分不能展示*/
text-overflow: ellipsis;/*溢出部分用点点点展示*/
}
- 背景图片处理
在盒子里面设置背景图片
主要代码介绍
设置背景图片大小,如果图片过大则出现图一效果,如果图片刚刚好则出现图二效果,如果图片过小则出现图三效果
background-size: 100px 100px;/* 设置背景图片的大小 */
设置图片是否重复,重复则出现图三效果,设置不重复则出现图四效果,但是不居中
background-repeat: no-repeat;/*不重复出现,一张图片就一张图片*/
设置背景图片在本元素中的定位,后面的值也可以用像素
background-position: center center;/*设置背景图片在本元素中的定位,后面的值也可以用像素*/
可以设置一下四种效果
div {
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(fy.jpg);/*url是背景图片的地址*/
float: left;
}
.b {
/*第二张图*/
background-size: 200px 200px;/* 设置背景图片的大小 */
}
.c {
/*第三张图*/
background-size: 100px 100px;
}
.d {
/*第四张图*/
background-size: 100px 100px;/* 设置背景图片的大小 */
background-repeat: no-repeat;/*不重复出现,一张图片就一张图片*/
background-position: center center;/*设置背景图片在本元素中的定位,后面的值也可以用像素*/
}
四.css开发小问题
- 在开发过程中display属性中的三种属性:inline ,inline-block,block
其中inline 和inline-block叫–>文本类元素
凡是带有inline属性的元素都有文本类特点
文本类有啥特点呢
比如写一个串文字,中间用空格隔开,这个空格表示文字分隔符,所以文字中间会有一个小的空余,这多少个空格都不好使。
文本类元素也符合这个特点比如span元素,img也会出现这种效果,为啥img也会出现这样效果呢,因为img是inline-block元素
那怎么解决这种问题呢:直接把中间的空格和回车(文字分隔符)去掉就好了
<div>
第一串元素 第一串元素 第一串元素
</div>
<div>
<span>第二串元素</span>
<span>第二串元素</span>
</div>
<div>
<span>第三串元素</span><span>第三串元素</span>
</div>
- 行元设置宽高没有效果
给行元素设置下面这两种种属性
是什么原因呢,只要这两个属性设置其中的一个,这个元素就会在内部被转换成display: inline-block;所以就可以用了
float: left/right;
position: absolute;
- 文本元素的特点
对齐方式,在一行文本里面,他的文字内容是底对齐,因为img也是本文类元素,所以,图片跟文字也是底对齐
当span元素设置宽高没内容时,他会跟盒子的底部对齐,
当span元素设置宽高有内容时,他会跟盒子里面的内容的底部对齐。
还可以用vertical-align: 像素值; 调一行元素的对齐线。
- 没有重置padding跟margin的后果
web本身很多元素自带padding和margin,所以开头一定要重置padding跟margin
代码如下
*{
padding:0px;
margin:0px;
}
否则布局时会出现以下情况
由于ul自带的padding跟margin把ul跟盒子分隔开。
- 实现文字竖排
//css
div {
writing-mode: vertical-rl;
}
//html
<div class="a">
你好啊
</div>
- 实现文字对齐
div {
background: #999999;
width: 140px;
height: 50px;
text-align-last: justify; //实现文字对齐
padding: 0 14px;
line-height: 50px; //高度居中
}
<div class="a">
你好啊
</div>
- 禁用事件触发
作用,禁用默认事件、冒泡事件、鼠标事件、键盘事件等
.disabled-trigger{
pointer-events: none;
}
用纯css实现三角形
width: 0px;
height: 0px;
border-bottom: 20px solid #000;
border-left: 20px solid transparent;
/* transparent是透明色 */
border-right: 20px solid transparent;
效果
图片的间隙问题
当两个图片放在一起时中间会出现一个空隙
- 第一种处理方法(回车处理掉)
- 第二种(给图片添加浮动)
- 第三种(给图片添加display:block)
标题小图标的添加
图标文件后缀为ico
图片文件要放在项目的根目录下
调用图标
<link rel="icon" href="favicon.ico">
自定义小图标
iconfont官网
先在js文件中引入(引用的代码都放在css文件里面)
下载的代码放在font文件里面,然后从font文件里面去引用
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
盒模型(解决计算盒子宽高被padding或者border撑大)
盒模型
1.标准盒模型
总宽度=border(左右)+width+padding(左右)
总高度=border(左右)+height+padding(左右)
2.IE盒模型(怪异盒模型)
总宽度=width;
总高度=height;
box-sizing:border-box;/* 变成IE盒模型*/