目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spa…
css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2…
一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整体布局(header.body.footer) 抽屉的首页主要分为三块:头部.网页内容.底部内容. 2.header实现 header由logo.内容菜单.登录菜单.搜索框四部分组成. 代码架构为: CSS代码: body{ margin:0px; background-color:#ededed;…
层叠与CSS的权重判断 1.要理解层叠,除了前面的内容外还差最后一个知识点.你已经知道如何使用多个样式表来更好地组织你的样式,或者支持不同类型的设备.不过实际上用户访问你的页面时还有另外一些样式表. 2.我们来复习一下. 浏览器确定要对一个元素应用哪个样式时,优先级是 作者样式   >    读者样式(个别浏览器允许读者自己设置样式:如果读者在一个属性声明最后加上!important就能覆盖作者样式)   >   浏览器默认样式 实际上,这就是在问“层叠”的作用,只是问法不同. 给定一组样式表…
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式.CSS以HTML为基础,提供了丰富的功能(如字体.颜色.背景的控制以及整体排版等等),还可以针对不同的浏览器设置不同的样式. 1.2 HTML.CSS与JS三者的关系 HTML:页面结构,负责从语义的角度搭建页面结构.…
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>架构分析</title> </head> <body> <!-- 页面整体架构 --> <div c…
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,并且能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,通常情况下CSS会配合DIV标签一同使用. CSS全称层叠样式表(Cascading Style Sheets)…
颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间        一般都用16进制表示颜色    单位        1. px像素(Pixel).像素,与分辨率设置相关.        2. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置.        3. em是相对长度单位.相对于当前对…
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 一.CSS简介 css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式.目前推荐遵循的是W3C发布的CSS3.0.用来修饰XHTML或者XML等样式文件的计算机语…