![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
上海_彭彭
这个作者很懒,什么都没留下…
展开
-
前端应用_css_定位属性position 三种经典用法详细讲解
css的属性 position 来设置元素的定位类型,为什么要有这个呢, 设计思路 是 让盒子欲所欲为 ,我想放到哪就放到哪 ,有种天马行空的感觉。突破了前面讲的文档流。position的设置项如下:- relative 生成相对定位元素元素所占的文档流的位置不变,元素本身相对于文档流的位置进行偏离。我先创建个文档流, 然后再用这个特性如果我想把 1 盒子 移动 ,怎么处理呢, ...原创 2019-07-29 09:52:44 · 468 阅读 · 0 评论 -
前端应用_css_浮动特性
了解浮动之前得先知道什么是文档流。文档流是指: 盒子按照html标签编写的顺序依次从上到下,从左到右,块元素占一行,行内元素在一行之内 从左到右依次排列,每个盒子都占自己的位置。浮动的特性浮动分为两种 一个是左浮动 ,另一个是右浮动浮动元素 遇到 无论什么类型元素都要停下来。浮动元素 能让内联元素 或者 块元素转化为 内联块元素 同时具有两者的特性相邻浮动的块元素可以并在一行 超...原创 2019-07-28 13:28:26 · 224 阅读 · 0 评论 -
前端应用_css_盒子模型05_盒子尺寸计算应用讲解
先看我们要做的示例 :第一种方法需要计算 根据公式 ,盒子的宽度= width +左右padding +左右border盒子的高度=height +上下padding +左右border代码如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> &...原创 2019-07-27 16:14:52 · 273 阅读 · 0 评论 -
前端应用_css_盒子模型04_盒子尺寸计算
我们举个例子, 当我们设置了 同样的width 和height 按道理应该大小一样,我们看看代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-07-27 14:18:47 · 209 阅读 · 0 评论 -
前端应用_css_盒子模型01
先理解这张图:把元素叫做盒子,设置对应的样式分别是:盒子的边框(border),盒子内容和边框之间的间距(padding),盒子与盒子之间的间距(margin)。页面的布局 就是 用盒子与盒子拼揍起来的 。在学习的过程中,我们发现表格也可以做页面布局, 为什么 还要盒子做布局呢?答: 打个比喻,我们想装饰一个花园, 表格布局是什么样呢, 他是把花 每一个都插入里面,然后拼揍,也能组...原创 2019-07-26 18:56:17 · 122 阅读 · 0 评论 -
前端应用_css_表格样式讲解
我们做出来的效果如下:第一我们先建表格如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n...原创 2019-07-26 15:00:37 · 1554 阅读 · 0 评论 -
前端应用_css_hover和before after 应用实例讲解
hover 是伪类选择器 ,当光标悬浮的时候,触发的动作。before 和after 是对元素额外的添加东西,一个是前, 一个在后边 。直接看示例就能明白了,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...原创 2019-07-26 14:11:11 · 595 阅读 · 0 评论 -
前端应用_css_三大元素类型区别和联系(块元素,内联元素,内联块元素)
块元素特点为:1.独占一行2. 可以设置任何样式3. 如果没有设置宽度 ,默认为父级宽度的100%示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <st...原创 2019-07-26 12:05:40 · 224 阅读 · 0 评论 -
前端应用_css_背景图片(background-position)
background-position 有方位属性>>> left center right bottom top例如 我想 让图片 放在 右下角的位置 , 就可以用 background-position:right bottom; .box2{ margin:50px auto; margin-bottom:50px; ...原创 2019-07-30 18:50:04 · 951 阅读 · 0 评论 -
前端应用_css_背景图片(background-repeat)四种用法
以下演示 background-repeat的三种情况:请看代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...原创 2019-07-30 17:50:47 · 5740 阅读 · 0 评论 -
前端应用_css_样式选择器以及应用
标签选择器前面一节都是标签选择器的应用,这里暂时不写了, 链接如下标签选择器id选择器#id{color:red}id 选择器示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g...原创 2019-07-25 09:35:52 · 180 阅读 · 0 评论 -
前端应用_css_清除浮动的最常用的四种方法,以及优缺点(划重点经常考)
为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题1.如下,我给父盒子设置一个boder,内部放三个个盒子两个big 一个small,未给big和small设置浮动,则他们会默认撑开父盒子2.当我给内部两个盒子加上float属性的时候顶部盒子就会顶上来,然后父盒子因为没设置高度,变成一条线,big和small已经浮动了总结一下:当父元素不给高度...原创 2019-07-28 14:52:50 · 314 阅读 · 0 评论