每次用到了<input/> 元素 和inline-block的<span></span>(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,这个时候就很蛋疼了,毕竟不在水平线上,很不美观. 有以下解决办法: 对于input和span都用浮动,这样就是平齐的,但是记得在外面清除浮动,避免对其他元素造成影响 不加浮动时,可以通过截图发现,它是不再一条水平线上的,有错位的情况. 在加了浮动后,情况如下图: 代码如下:       2. 有

当年刚知道CSS display有 inline-block 这个神奇的属性的时候,感觉碉堡了,以为从此不用float了,什么div.p,只要 display: inline-block 就在一行上了.直到想用它装装逼的时候,才发现自己图样图森破,只能用一句话形容,当时我就懵逼了.. 莫名其妙的元素间隔 ;;} 如此粗暴的reset方式.还是看个例子吧: html: <div id="text"> <p>hahah</p> <p>hahh

产生间隙的原因就是标签之间的空格,去除的方法: 1 设置父元素的font-size:0;空格字符的宽高都为0, <div class="demo1 demo2"> <span></span> <span></span> <span></span> <span></span> </div> 2 inline-block元素在一行上,不换行 <div class=&

最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,firefox,ie8.9.11,360浏览器. 一.基本的css兼容: 1.可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 .ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用.上网搜你可能会得到这样的答案: .selector { c

改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id="navigation"> <a href="index.html">WidgetCo Home</a><a href="products.html">Products</a> <a href=&quo

display  block       块级元素,占据一行 none       隐藏 inline      允许同一行显示,但不再有宽和高 inline-block   允许在一行的块级元素,可以有宽和高 例如,把所有a元素设置成100×50的块级元素: a{ display: block; width: 100px;height: 50px; } float  none   默认 不浮动 left     向左浮动 right   向右浮动 例如,设置a1 a2向右浮动: a1{floa

过渡放在原:transiton:2s; 块无素:block,inline inline-block1,占一行,有宽,有高内元素:2,无宽高,内容撑开宽高.不支持上下margin.代码换行补解析.3, 一行,有宽,有高.不设宽度,要内容撑开.float:浮动元素.clearfix{*zoom:1;}.clearfix:after{content:"",display:block;clear:both}float:none noneoverflow:visible nonedisplay:

css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div {border:1px solid #89f989; margin:20px; width:300px; } .h100{height:100px;} .h200{height:200px;} .h400{height:400px;} .lh200{line-height:200px;} .lh20{line-

css,全称Cascading Style Sheets,层叠样式表. css选择器是从右往左解析的,解析速度会比较快. 选择器 选择器权重 !important 优先级最高 元素属性 优先级高 相同权重 后写的生效 行高 留坑 背景 背景颜色 渐变色背景 多背景叠加 背景图片和属性(雪碧图) background:red url(image.png);这里不需要逗号 background:no-repeat;还可以选择repeat-x,repeat-y. background-position

一.css属性:1.层叠性:当出现相同的选择器时,属性冲突的时候,后面的属性会把前面的属性 覆盖掉. 2.继承:当存在父子关系的时候,子元素会继承父元素的部分属性 注意: a标签不会继承颜色:h标签不继承字体大小 3.优先级:当有多个选择器作用在同个元素上时,到底谁有效果? 优先级顺序:继承性 < 通配符 * < 标签选择器 < 类选择器 < id选择器 < 行内样 式 < ! important(影响的只是单一的属性) 4.权重计算:当有多个复合选择器作用在同一个元素

推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> 属性 属于标签 <img src="图片的地址"><table width="100" height="200"></table> 1.1 语法规范 标签嵌套 用缩进 标签名 不区分大小写 建议小写 属性名 不区

前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="11"> <meta name="description&

老师的笔记: 前情回顾: day49 混乱即阶梯. 1. 前情回顾 HTML HTTP和HTML 文档机构 <!Doctype html> HTML head <meta> <title> <link> icon <style> 直接写CSS样式 <link> CSS文件 <script> JS文件 body 常用标签: div span h1~h6 a p img form input text password num

CSS(Cascading Style Sheet,层叠样式表) 是一种用来表现HTML或XML等文件样式的计算机语言. 作用:是用来美化HTML标签的,相当于给页面化妆. 每个css 都是有两部分组成: 选择器和声明. 声明有包括属性和值,每个声明后用分号结束. 选择器:就是明确文件样式的作用对象.  是一个选择一个标签或多个标签的过程. 声明:就是样式 CSS 三大特性: 1.层叠性:当多个样式作用到同一标签,当发生冲突时,总是执行最后的那个样式代码也就是覆盖. 2.继承性: 文字的所有属性

1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个CSS文件. 方式三.在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式 <!DOCTYPE html> <html lang="en"> <head> <meta char

clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                                              一.css 语法形式:                                                  二.使用步骤   1.引入css规则 2.使用css选择器 查找html标签: 3.利用css属性 设置html标签的样式:

CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: 一.css 语法形式: 二.使用步骤   1.引入css规则 2.使用css选择器 查找html标签: 3.利用css属性 设置html标签的样式: 三.css的4种引入方式   1.行内引入:行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用 只能对单一标签进行CSS渲染,无法批量渲染,无法将html代码和css代码做解耦 <!D

一.float属性 block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.margin.padding属性: 常见的块级元素有 div.form.table.p.pre.h1-h5.dl.ol.ul 等. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化.inline元素设置width.height属性无

标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设   (hr 块级标签) 二:行内块标签(inline-block) ——> 不独占一行,默认宽度为内容的宽度,宽高可设 二:行内标签(inline) ——> 不独占一行,默认宽度为内容的宽度,宽高不可设,由内容决定   (br 标签是行内标签) CSS引入方法: 1.内联(行内)样式:写到标签里面,通过style属性,把css代码写到style里面 2.内部样式:head标签

完善学员管理系统 - bootstrap fontawesome - 分页,路径导航,表格(class样式),消息图标(i标签),邮件图标(i标签) - 响应式导航 @media(min-width, max-width来设置样式) 导航 - 后台管理布局(三大块,header, menus, content; menus, content用Position) a. header: min-width:1190px; height:48px; line-height:48px //line-he

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局. 盒子模型 一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边距(margin) 盒子和边框   width和height background-color 盒子 设置的盒子内容区的大小 设置背景颜色