前端学习-基础部分-css（二）

【前端学习-基础部分-css（二）】的更多相关文章

前端学习-基础部分-css（一）

开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式内联模式:直接在<head>中直接写css,例如 p{ color:rgb(166, 226, 226); } #设置P标签的颜色 1.2 行内模式行内模式:在html中对应元素直接书写 <p style="color:cadetblue">第一段世界大势,合久必分,分久必合</p> 1.3 外部样式表外部样式表,主要是有俩种,一种为…

前端学习-基础部分-css（二）

开始今日份整理,今日主要是CSS中很重要的一部分,就是盒模型,浮动,定位属性 1.盒模型 1.1 特性: 当对一个文档(网页)进行布局的时候,浏览器渲染引擎会根据CSS-Box模型(盒子模型)将所有元素表示为一个矩形盒子,CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸等性质),在CSS中使用盒模型描述这些矩形盒子中的每一个.这个模型描述了元素所占空间的内容. 每个盒子有四个边:外边距边(margin), 边框边(border), 内填充边(padding) 与内容边(conten…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·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…

前端总结·基础篇·CSS（三）补充

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充目录一.移动端 1.1 视口(viewport) 1.2 媒体查询(media query) 1.3 相对字体大小(rem/em) 二.选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级三.样式重置(reset) 3.1 常用重置 3.2 重置插件(Normalize.css) 四.浏览器前缀 4.1 前缀由来 4.2 解决方案五.兼容性…

前端学习之路-CSS介绍，Html介绍，JavaScript介绍

CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000…

前端总结·基础篇·CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */ 2 浏览器前缀 { t…

前端学习笔记之CSS介绍

阅读目录一什么是CSS 二为何要用CSS 三如何使用CSS 一什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是HTML标签的显示效果,比如换行.宽高.颜色等等层叠属于CSS的三大特性之一,我们将在后续内容中介绍表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里二为何要用CSS 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下 <!DOCTY…

前端学习之路CSS基础学习二

CSS属性相关样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height: 30px; } 文字操作 /*字体样式: 关键字:font-family 作用:更改字体的样式*/ { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } /*字体大小: 关…

Web前端基础(5):CSS(二)

1. 盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 1.1 盒模型示意图 1.2 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离,padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充所有的borde…