[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中

原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 (一)利用绝对定位与transform <div class="parent"> <div class="children"></div> </div> 将父元素定位(relative),子元素如下 .children{ position: absolute; top: 50%; left: 50…

[Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么? 列出display的值,说明他们的作用.position的值, relative和absolute分别是相对于谁进行定位的? CSS中position和display理解 CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制…

[Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float主要流行与页面布局,然后没有使用后没有清除浮动,就会后患无穷. 知乎上截图: 分析HT…

Web前端-CSS必备知识点

Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: <link rel="stylesheet" type="text/css" href="sheet.css" title="default"> link标签: <link rel="styleshe…

WEB前端 CSS(非布局)

目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影响页面加载的效率 CSS选择器的优先级 CSS声明 CSS非布局声明 CSS布局声明除了css 对样式有影响,标签元素的其它属性也会有一些影响.如的type类型 WEB前端 CSS CSS被用于同时控制多重页面的样式和布局样式很多:关键在于布局的耗时和难点通过CSS可以将html中的格式化都剥离…

零基础学WEB前端-CSS

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础…

web前端—css面试题

1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id > class > tag(important要优先于内联样式) 3.阐述一下CSS3的新增伪类. 4.如何居中 div?如何居中一个浮动元素?如何让绝对定位的div居中? div居中:给div一个宽度,然后添加margin: 0 auto;属性即可. 浮动元素居中: 绝对定位的div居中: 5…

css进阶 04-如何让一个元素水平垂直居中？

04-如何让一个元素水平垂直居中? #前言老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现方法.但大部分人的写法不够规范,经不起千锤百炼.换句话说:这些人也就面试的时候夸夸其谈,但真的上战场的时候,他们不敢这么写,也不知道怎么写最靠谱. 这篇文章中,我们来列出几种常见的写法,最终你会明白,哪种写法是最优雅的. 当然,我还会拿出实际应用中的真实场景来举例,让你感受一下标准垂直居中的魅力.…

css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrapper{ position:relative; background: #acc; width: 500px; height: 500px; } .content{ background: #aaa; width:400px; height:400px; position: absolute; /*//父元素…

CSS（九）：设置盒子水平垂直居中

通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U…

Bootstrap 简介(Web前端CSS框架)

目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国…

Bootstrap（Web前端CSS框架）

官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 即:Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 百科定义: 简介:Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.Boot…

web前端-基础篇

该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下: e.g. background-image:url(图片的url路径); width:18px;height:18px; 不设置的话,出现的情况就是只有该内容区域有内容时,才会出现背景图片:ps:因为…

web前端基础篇⑨

1.web端.app端目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性用原生代码的话根据不同的屏幕尺寸,用@media screen引入不同的值用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据.web和app图不能相同,为了浏览速度最好使用雪碧图. APP端.CSS原生代码写需要注意:①宽高,使用百分比的方式. ②宽的话,使用rem,不能在一套css里面使用两个…

写给自己的web总结——css篇（1）

上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种各样的修饰与改变. 如何引入css 引入外部css文件这是我们最常用的方式,通过在head中引入一个link标签引入例:<link rel="stylesheet" type="text/css" href="1234.css"> 2…

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以…

web前端——CSS详解

简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表".通常情况下,我们是用HTML标签定义文档的内容,用CSS定义内容的表现形式,这样将页面内容与表现形式分离,可以使HTML文档代码看起来更加简练,缩短浏览器的加载时间. CSS的语法 1.基本语法规则 CSS的语法规则比较简单,由三部分组成:选择器.属性.值,写法如下: selector {property…

web前端基础篇⑩

1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版三格式布局(最常用)16列式:每格40px 间距20px 3 3 6 4版四格式布局(较常用)容器:container_x 后面x代表数字.container_12 将页面分成12等份2.使用bootstrap下载后生成css,js,foots三个文件夹,三个文件夹不能修改不能删,缺一不可.min是压缩版,引入时建议引入压缩版.所有的javascrip…

web前端基础篇⑧

1.伪类选择器都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {color:yellow} 已访问的链接a:hover {color:green} 将鼠标放在链接上a:active {color:blue} 按住链接的时候hover必须放在link和visited后,才有效.active必须放在hover之后,才有效.2.伪元素选择器也以冒号开始.:first-l…

web前端基础篇⑥

LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两个文件③启动koala④配置路径⑤输入一部分less-刷新koala⑥生成用less命名的css文件⑦在html里面引入的是css文件(不用建css文件)less里引入文件@important 可引入{less 可变的/css不可变的.变量@变量名:具体的值混合(mixins)只有3类class类/…

web前端基础篇⑤

1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype>解析模式4.CSS中的hack技术(不同的浏览器显示不同的页面内容)5.条件注释6.倒入包opacity-filter(0-100)png背景-导包圆角-导包,图片BFC=200m:1(无限值)IE下触发BFC环境 haslagout技术双倍margin兼容性问题IE下 3PX差距font-size 10…

web前端基础篇③

1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src＝“地址” controls＝“controls” loop autoplay>2.块级元素行内元素独占一行不独占一行设宽高不能设宽高内容不影响边框内容影响元素大小可嵌套块级.行内嵌套会乱 m…

web前端基础篇①

html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式分为标准模式混杂模式非标准模式-针对IE6or74.标签成对出现,/表示结束5.选中内容 ctrl+/ 即可注释6.<mate charset:“UTF-8”>支持中文显示 ★ps 切图①图片格式为png1.按住shift拖动鼠标建立参考线.2.使用切片工具切出图片3.导出图片:文件-储存为web格式-预设(png-24)-选中图片-储存-…

Web前端 css实现元素垂直居中的常用方法

方法1:table-cell html结构: 1 2 3 <div class="box box1"> <span>垂直居中</span> </div> css: 1 2 3 4 5 .box1{ display: table-cell; vertical-align: middle; text-align: center; } 方法2:display:flex 1 2 3 4 5…

[Web 前端] CSS 盒子模型，绝对定位和相对定位

cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子模型具有内容(content).填充(padding).边框(border).边界(margin)这些属性.我们所说的width,height指的是内容(content)的宽高,一个…

web前端----css补充

css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px; 没设置之前: 设置之后: 3.外边距:margin4.内边距:padding5.居中:margin 0 auto;(只是针对盒子居中) 6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了displa…