正式回归css

前言:之前做web前端项目的时候才零星接触前端的知识,没有系统的整理出知识体系,所以在入行(web前端)两个月时,发觉css在页面布局起着至关重要的作用,良好的搭建页面布局,在后来写js也非常有帮助,因为考虑到页面的拓展性(产品需求设计需求)所以这就是重新回归的原因!

回归思考:

CSS  要点:

1.对齐

2.居中,垂直,水平

3.浮动,闭合浮动

4.细节(reset  这种重置行的要怎么更好的利用,然后更好的应用到自己的项目)

1.CSS inherit  继承父容器的特性 指大小,颜色,背景

其实尺寸用途并没有很大,在相对彧颜色,背景可能有自己的优势

where

when

与height or width :100% 不同的是

connection

flexibility

2.text-align:justify

从张鑫旭的博客回来,对此CSS实现的文本对齐有一点启蒙,justify 本意是拉伸之间的空格使左右两端对齐,在文本中设置可以完成目标。

看demo(暂时放在jsffidle):https://jsfiddle.net/deqntw16/

如果是例如  列表项,或者内敛元素,最后一行没对齐(一行的话就是第一行)!

那怎么办?

剖析一下justify的原理:文本或列表超过一行,元素之间有间距,然后用我们的justify就可以了

所以按照这个原理,在最后添加如  inline-block( 宽度100%,高度0 )就可以实现了。

结构ok 了 但是 有的时候撑开非常难看!

所以目的在于使得最后一行 左对齐

1.同样填充“一条线”的inline-block 然后平衡整行的列表项(即 放置跟上一行相同数量的列表项)从而造成假象

2.可以单独对最后一行做letter-spacing 的调整

=============================================================

时间: 2024-10-21 19:01:04

正式回归css的相关文章

正式回归css之样式优先级

总结起来很简单:对于一个元素 1.本身没有样式修饰,它会怎么做呢?search! 所以 第一个原则:就近原则,找到离自己最近的祖先元素继承样式 2.本身有样式 2.1 内嵌样式(style)>内联样式表>外联样式表 这点没什么好说的 2.2 当涉及到多个选择器修饰的时候,有优先级顺序:内嵌样式>id>class>标签 举个栗子吧,就是  先比较id个数,在以此类推,具体看demo https://jsfiddle.net/y0a14gqv/ 2.3 !important 最无

今天正式回归

各位看客大家好 从今天开始我正式回归 我会经常的更新一些关于linux基础命令使用以及注释以及一些linux架构的知识 希望大家能用到. ----ahjin 原文地址:https://blog.51cto.com/12851925/2417078

CSS Float nine rules

CSS Float nine rules w3 css float nine rules CSS Float Rule1 CSS Float Rule2 CSS Float Rule3 CSS Float Rule4 CSS Float Rule5 CSS Float Rule6 CSS Float Rule7 CSS Float Rule8 CSS Float Rule9 finally 参考文章 注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出.

UI设计趋势:渐变设计风格重新回归主流

在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表明渐变以一种微妙的方式回归了.不过和以往的我们所看到的渐变不同,重新回归的渐变色设计有着不一样的使用技巧和特色,更加贴合这个时代的风格和需求了.如果你也想使用,不妨从今天的设计示例中学习一下“全新”的渐变设计. 潮流的引领者 在今年早些时候,Spotify 开始在自家网站上大量使用双色调设计,将双色

腾讯正式加入OCP阵营,拥抱全球开源生态圈

近日,腾讯正式加入OCP开放计算项目.后续,腾讯将加强与社区成员在数据中心.网络.服务器等方面的技术交流和联动,推动基础设施的跨企业开发以及软硬件前沿技术的普及. OCP是开源计算项目Open Compute Project的简称,由Facebook等公司于2011年发起成立的一个非营利组织,旨在以最低的成本打造最具效益的运算架构,涵盖服务器.存储设备.网络以及数据中心及设计等,并推动以开放硬件及软件的形式促进整个生态的发展.目前,包括Google.Microsoft等超过170家互联网,软.硬

第45篇 CSS属性选择器

1,内置函数复习 1.1 reduce #reduce 从可迭代对象里面不断的取值累加 from functools import reduce li = [1,2,3,4,5,6] ret = reduce(lambda x,y:x+y,li) print(ret) res = reduce(lambda x,y:x+y,range(1,101)) print(res) 1.2 sorted 1.2.1 按照年龄进行排序 li = [ {'name':'gold','age':'40'}, {

web前端(7)—— 了解CSS样式,引入css样式的方式

CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样式: 图中我圈出来的左边html代码的就是html属性的键值对,然后圈出的右边位置就是css样式,然后右边那个窗口你还可以所谓的线上编辑,在最后点击一下,就可以编辑: 这个此时就暂且不提了,以后学到的时候再添加,然后那些已经有的也可以去掉,把选项框里的“√”

程序员每天累成狗,是为了什么

HI,想我了吗 了吗 了吗?自从上次情人节一别,我已经接近20天没更新文章了. 至于原因:是,办点其他私事,这一段压根没怎么联网,所以不太好意思,我也很想你们了.大家也不要问为什吗,辣么帅的人有什么事了,从今天开始我就正式回归了!还是那熟悉的节奏和风格,和帅帅的颜值 掌声响起来...啪啪啪 啪啪啪 这篇文章的起因有二点: 一.我这些天之所以没更新,不是因为我懒,是因为我确实很累和其他私事. 二.有许多人问我说:小北哥哥,感觉每天都很累,真不知道为什么,什么时候是个头! 我看我们的很多同行,都是一

Windows操作系统

Microsoft Windows,是美国微软公司研发的一套操作系统,它问世于1985年,起初仅仅是Microsoft-DOS模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统. Windows采用了图形化模式GUI,比起从前的DOS需要键入指令使用的方式更为人性化.随着电脑硬件和软件的不断升级,微软的Windows也在不断升级,从架构的16位.32位再到64位, 系统版本从最初的Windows 1.0 到大家熟知的Windows 95.Windo