absolute | 易学教程

用CSS代码写出的各种形状图形的方法

阅读更多关于用CSS代码写出的各种形状图形的方法

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。 1.正方形 #square { width: 100px; height: 100px; background: red;} 2.长方形 #rectangle { width: 200px; height: 100px; background: red;} 3.左上三角 #triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } 4.右上三角 #triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent;} 5.左下三角 #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } 6.右下三角 #triangle-bottomright { width: 0; height: 0; border-bottom

文本省略号的css样式实现

阅读更多关于文本省略号的css样式实现

-webkit-line-clamp 是一个不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 text-overflow ，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> // static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right

轻松掌握CSS的各种居中效果

阅读更多关于轻松掌握CSS的各种居中效果

个人建议：不论是学css还是其他，遇到属性、方法之类的问题，先看官方文档。如果看不懂，再看别人的博客。关于position的属性有哪些，官文是这样的：这里有一个值得注意的点是 absolute 属性，就是说使用该属性的元素会被定位在相对于第一个父元素的位置，而 fixed 是定位在相对于浏览器的位置。两者的区别在于，当使用 absolute 的元素与使用 fixed 的元素定位在同一位置时，如果网页滚动，那么 fixed 的元素不会有任何变化，而 absolte 元素会被滚走。如下图接下来使用position属性来实现各种居中效果：一、屏幕的各种居中 1、屏幕左上方 .parent{ position: absolute; //可加可不加 background: #FF5722; width: 300px; height: 300px; } < div class = " parent " > </ div > 2、屏幕中上方 .parent{ position: absolute; left: 50%; margin-left: -150px; //宽度的1/2 background: #FF5722; width: 300px; height: 300px; } < div class = " parent " > </ div > 3、屏幕右上方 .parent{

HTML+CSS 绘制太阳系各个行星运行轨迹

阅读更多关于 HTML+CSS 绘制太阳系各个行星运行轨迹

模拟宇宙太阳系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟太阳系</title>  <style> .solarsys { width: 800px; height: 800px; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); } /*太阳*/ .sun { left: 357px; top: 357px; height: 90px; width: 90px; background-color: rgb(248, 107, 35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248, 107, 35), -5px -5px 10px rgb(248, 107, 35), 5px -5px 10px rgb(248, 107, 35), -5px 5px 10px rgb(248, 107, 35);

css基础

阅读更多关于 css基础

css样式由选择符和声明组成，而声明又由属性和值组成。P{color:blue;}，选择符指网页中要应用样式规则的元素。属性与值之间用：分隔，多条声明用；分隔 css中用/*注释语句*/，html用<!—注释语句--> 从CSS样式代码插入的形式来看基本可以分为3种：内联式、嵌入式、外部式。内联式就是直接把css代码直接写在现有的HTML标签中，即写在style=””双引号中，如果有多条语句可以写在一起，用分号隔开。嵌入式：把CSS代码写在<style type=”text/css”> </style>标签之间。并且一般情况下嵌入式写在<head></head>之间。外部式：把css代码写一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<link href="base.css" rel="stylesheet" type="text/css" /> 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内。标签选择器：就是HTML中的标签，如<html><body><h1><p><img>

主页的设计

阅读更多关于主页的设计

主页仍然用了淘宝的模子进行了设计，成果：在推荐这一块的盒子数决定由服务器决定，会在本地存cookie，然后查询用户喜好从而推荐。今天用的比较多的是position的absolute和relative，深切的感受了absolue。 absolute在有父元素定位时按父元素来，没有时按照文本来。 relative按照自己来。遇到的难点尽管文本框改为圆角，点击时还是有蓝色外框一开始尝试用F12检查这个元素的，结果发现找不到这个元素，最后通过百度找到了正确的解决方式：有一个outline的属性，是专门用来设置这个的，修改即可搜索按定位不到文本框上我用的是将文本全部设置成了圆角，按钮覆盖在文本框的上面，就在现在写博客的时候突然发现自己有点蠢~ 可以将文本框右边设置成直角的呀，都不需要定位了~没法吐槽自己当时的脑回路~当然按钮用了渐变的效果~ 列表的hover效果只有文字背景色改变这个问题是今天新的领悟，更加熟悉了盒模型，如果给列表设置margin的话背景色当然就给内容上色了，导致一段空隙，这个空隙就是margin的空隙，而padding设置则正好，将列表项的内容充实了，所以就全上了色。外边框的像素影响了尺寸的设置总是差几个像素由于有印象，所以比较快的解决了这个问题，就是设置box-sizing: border-box;即可，把边框也算在盒子内部。主面板的布局

HTML学习（六）：CSS布局模型

阅读更多关于 HTML学习（六）：CSS布局模型

1. CSS布局模型清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：流动模型（Flow）浮动模型 (Float) 层模型（Layer）这三个布局模型究竟是什么布局？下面几个小节会详细给大家介绍。 2. 流动模型（一）先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 <!DOCTYPE HTML> < html > < head > < meta http-equiv = " Content-Type " content = " text/html;

CSS居中

阅读更多关于 CSS居中

一、文本居中 1、横向居中 text-aline:center; 2、单行文本垂直居中 line-height:height; 3、多行文本垂直居中盒子不设置高度，同时设置上下相同的padding； .box{ width:400px; font-size:20px; line-height:40px; padding:20px 0px; } 二、块级元素居中： 1、横向居中 ①已转块或块级： margin:0 auto; ②绝对定位（宽度定值） .box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; margin-left:-200px; } ③空间移动（宽度不定） .box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; transform:translateX(-50%);/*空间移动，水平移动*/ } 2、垂直居中 ①不设置父盒子高度，同时设置上下相同的padding，前提是块级元素和父盒子宽度都固定 .box { width: 400px; /* 子盒子垂直居中父盒子高度省略设置相同的上下padding */ padding: 100px 0; border:

CSS学习笔记——定位

阅读更多关于 CSS学习笔记——定位

1.元素的定位属性边偏移属性：left、right、top、bottom 定位模式：position：static/relative/absolute/fixed 定位=边偏移+定位模式。 2.静态定位 position:static 静态定位是所有元素的默认定位，使用静态定位，偏移量无法改变元素的位置。静态定位的主要作用是用于消除定位。 3.相对定位 position:relative 使用相对定位可以使用偏移量改变元素的位置，但是原来所占的位置，继续占有，并且每次移动的位置是以自己左上角的基点移动。注意：相对定位不脱离标准流，会占位置。 div { background-color: purple; position: relative; left: 100px; top: 150px; } 4.绝对定位 position:absolute 可以通过偏移移动位置，而且是完全脱标，不占位置。如果父级元素没有定位，那么子级元素的绝对定位以浏览器为准；如果父级有定位，那么子级元素以最近已经定位的父级元素为准，父级的定位可以是relative或者absolute，称为子绝父相或者子绝父绝。使用最多的是子绝父相。 5.子绝父相相对定位：占有位置不脱标绝对定位：不占有位置脱标在页面布局中，经常使用父级是相对定位子级是绝对定位例如：页面图片的轮播。 6

html基础--css基本属性

阅读更多关于 html基础--css基本属性

HTML基础--css基本属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <title>liudaozhang</title> <link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg"> <style> /*.c1{*/ /*height: 100px;*/ /*width: 100px;*/ /*border: red 2px solid;*/ /*text-align: center;*/ /*line-height: 100px;*/ /*}*/ /*text-align: center; 水平方向居中*/ /*line-height: 100px; chS方向居中*/ /*.c1{*/ /*height: 100px;*/ /*width: 100px;*/ /*border: red 2px solid;*/ /*float: right; ;*/ /*}*/ /*float:通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，*/ /*超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动

订阅 absolute