CSS
JustinNeil
年少是你未醒的梦话,风华是燃尽的彼岸花
展开
-
CSS基础
CSS(Cascading Style Sheets)指的是层叠样式表,用于修改HTML元素的基本样式,解决内容与表现分离的问题。CSS语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒...原创 2019-06-01 08:43:33 · 90 阅读 · 0 评论 -
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex it...原创 2019-06-02 21:36:34 · 398 阅读 · 0 评论 -
CSS3 动画
CSS3过渡CSS3中,我们为了添加某种效果可以从一种样式转变到另一种的时候,无需使用Flash动画或JavaScript。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。div{ transition: width 2s; -webkit-transform: width 2s; /*...原创 2019-06-02 21:34:49 · 369 阅读 · 0 评论 -
CSS3
圆角边框border-radius:圆角半径box-shadow:盒阴影 (右偏移量,下偏移量,阴影半径,阴影颜色)border-image:边界图片(图片地址,图像边界向内偏移,图像宽度,指定图像是重复拉伸还是铺满)div{ border:2px solid; border-radius:25px; box-shadow: 10px 10px 5px #888888; borde...原创 2019-06-02 20:49:14 · 629 阅读 · 0 评论 -
CSS 布局 - 水平 & 垂直对齐
水平居中行内元素首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center;<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; ...原创 2019-06-02 19:04:17 · 342 阅读 · 0 评论 -
CSS定位
position 属性指定了元素的定位类型。position 属性的五个值:static、relative、fixed、absolute、sticky元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。static定位HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会...原创 2019-06-02 16:14:42 · 118 阅读 · 0 评论 -
CSS display与visibility
CSS display块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性:和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-b...原创 2019-06-02 15:29:11 · 188 阅读 · 0 评论 -
CSS选择器
在CSS中使用选择器来设置特定元素的样式,主要的选择器有:元素选择器、id选择器、class选择器、分组选择器、嵌套选择器,后代选择器、兄弟选择器、伪类选择器、伪元素选择器,属性选择器元素选择器直接以HTML标签作为选择器<p>This is a paragragh.</p><style type="text/css">p{ text-a...原创 2019-06-02 10:35:57 · 190 阅读 · 0 评论 -
CSS盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素不同部分的说明:Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Paddi...原创 2019-06-02 09:47:37 · 237 阅读 · 0 评论 -
CSS常用属性
CSS 背景CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:**background-color **设置背景颜色,颜色值通常以下面几种方式定义:十六进制 - 如:"#ff0000"RGB - 如:“rgb(255,0,0)”颜色名称 - 如:“red”h1{ background-color:#6495ed;}p{ background-colo...原创 2019-06-01 13:55:49 · 10103 阅读 · 0 评论 -
CSS 响应式设计
Viewportviewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。设置viewport一个常用的针对移动网页优...原创 2019-06-02 21:38:59 · 200 阅读 · 0 评论